import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';

/**
 * @class
 * @classdesc Implements and exports the ght-zone-overview control.
 * @version 01.00.000
 * @extends LasalRuntimeSigElement
 * @property {String}   idvalue     - The value of the zone id. Default is undefined.
 * @property {String}   actvalue    - The value of the actual value. Default is undefined.
 * @property {String}   setvalue    - The value of the set value. Default is undefined.
 * @property {String}   unittext    - The unit text of the value. Default is undefined.
 */
export class LasalRuntimeZoneOvElement extends LasalRuntimeSigElement {

    /**
    * Creates an instance of LasalRuntimeZoneOvElement.
    * @constructor
    * @memberof LasalRuntimeZoneOvElement
    */
    constructor() {
        super();
        this.addPredefProps([{
            src: 'actvalue',
            dest: 'unittextactval',
            type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNIT_TEXT
        }]);
        this.addPredefProps([{
            src: 'setvalue',
            dest: 'unittextsetval',
            type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNIT_TEXT
        }]);
    }

    /**
     * Returns the component's registered tag name
     * @readonly
     * @static
     * @returns {String} The control's tag name.
     * @memberof LasalRuntimeZoneOvElement
     */
    static get is() {
        return "ght-zone-overview";
    }

    /**
     * Returns the import path URL used by Polymer.
     * @readonly
     * @static
     * @returns {String} The import path URL.
     * @memberof LasalRuntimeZoneOvElement
     */
    static get importMeta() { return import.meta; }

    /**
     * Returns the HTML literal of the component.
     * @readonly
     * @static
     * @returns {HTMLLIElement} The template literal of the component.
     * @memberof LasalRuntimeZoneOvElement
     */
    static get template() {
        return SigPolymer.html`
        <style include="sig-element-css">
            :host {
                background-color: var(--ght-zone-overview-background-color, inherit);
                border-width: var(--ght-zone-overview-border-width, 0px);
                border-color: var(--ght-zone-overview-border-color, inherit);
                border-style: var(--ght-zone-overview-border-style, none);
                border-radius: var(--ght-zone-overview-border-radius, 0px);

                /* Basic box model settings */
                display: block;
                position: absolute;
                overflow: hidden;
            }

            :host * {
                /* Reset margin and paddings for child elements and turn of selection */
                margin: 0;
                padding: 0;
            }

            .clearfix:after {
                @apply --clearfix
            }

            .zone-container {
                width: 100%;
                height: 100%;
            }

            #zoneSymbol {
                background-color: var(--ght-zone-overview-symbol-background-color, inherit);
                border-width: var(--ght-zone-overview-symbol-border-width, 0px);
                border-color: var(--ght-zone-overview-symbol-border-color, inherit);
                border-style: var(--ght-zone-overview-symbol-border-style, none);
                border-radius: var(--ght-zone-overview-symbol-border-radius, 0px);
                width: var(--ght-zone-overview-symbol-width, 60px);
                height: 100%;
            }

            #alarmImg {
                position: absolute;
                background-image: var(--ght-zone-overview-alarm-image, none);
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: var(--ght-zone-overview-alarm-image-top, 0px);
                margin-left: var(--ght-zone-overview-alarm-image-left, 0px);
                width: var(--ght-zone-overview-alarm-image-width, 20px);
                height: var(--ght-zone-overview-alarm-image-height, 20px);
            }

            #rampImg {
                position: absolute;
                background-image: var(--ght-zone-overview-ramp-image, none);
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: var(--ght-zone-overview-ramp-image-top, 0px);
                margin-left: var(--ght-zone-overview-ramp-image-left, 0px);
                width: var(--ght-zone-overview-ramp-image-width, 20px);
                height: var(--ght-zone-overview-ramp-image-height, 20px);
            }

            #lowerImg {
                position: absolute;
                background-image: var(--ght-zone-overview-lower-image, none);
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: var(--ght-zone-overview-lower-image-top, 0px);
                margin-left: var(--ght-zone-overview-lower-image-left, 0px);
                width: var(--ght-zone-overview-lower-image-width, 20px);
                height: var(--ght-zone-overview-lower-image-height, 20px);
            }

            #boostImg {
                position: absolute;
                background-image: var(--ght-zone-overview-boost-image, none);
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: var(--ght-zone-overview-boost-image-top, 0px);
                margin-left: var(--ght-zone-overview-boost-image-left, 0px);
                width: var(--ght-zone-overview-boost-image-width, 20px);
                height: var(--ght-zone-overview-boost-image-height, 20px);
            }

            #modeImg {
                position: absolute;
                background-image: var(--ght-zone-overview-mode-image, none);
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: var(--ght-zone-overview-mode-image-top, 0px);
                margin-left: var(--ght-zone-overview-mode-image-left, 0px);
                width: var(--ght-zone-overview-mode-image-width, 20px);
                height: var(--ght-zone-overview-mode-image-height, 20px);
            }

            #zoneId {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;

                color: var(--ght-zone-overview-zoneid-color, inherit);

                text-align: var(--ght-zone-overview-zoneid-align, center);

                top: var(--ght-zone-overview-zoneid-top, 0px);
                left: var(--ght-zone-overview-zoneid-left, 0px);

                width: var(--ght-zone-overview-zoneid-width, 30px);
                height: var(--ght-zone-overview-zoneid-height, 10px);                           
            }

            #zoneActval {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;

                color: var(--ght-zone-overview-actval-color, inherit);

                text-align: var(--ght-zone-overview-actval-align, center);

                top: var(--ght-zone-overview-actval-top, 0px);
                left: var(--ght-zone-overview-actval-left, 0px);

                width: var(--ght-zone-overview-actval-width, 30px);
                height: var(--ght-zone-overview-actval-height, 10px);                        
            } 

            #zoneSetval {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;

                color: var(--ght-zone-overview-setval-color, inherit);

                text-align: var(--ght-zone-overview-setval-align, center);

                top: var(--ght-zone-overview-setval-top, 0px);
                left: var(--ght-zone-overview-setval-left, 0px);

                width: var(--ght-zone-overview-setval-width, 30px);
                height: var(--ght-zone-overview-setval-height, 10px);                 
            } 

            #zoneActvalUnit {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;

                color: var(--ght-zone-overview-unit-color, inherit);

                text-align: var(--ght-zone-overview-unit-align, right);

                top: var(--ght-zone-overview-unit-top, 0px);
                left: var(--ght-zone-overview-unit-left, 0px);

                width: var(--ght-zone-overview-unit-width, 30px);
                height: var(--ght-zone-overview-unit-height, 10px);                 
            }     
            
            #zoneSetvalUnit {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;

                color: var(--ght-zone-overview-setvalunit-color, inherit);

                text-align: var(--ght-zone-overview-setvalunit-align, right);

                top: var(--ght-zone-overview-setvalunit-top, 32px);
                left: var(--ght-zone-overview-setvalunit-left, 120px);

                width: var(--ght-zone-overview-setvalunit-width, 20px);
                height: var(--ght-zone-overview-setvalunit-height, 20px);                 
            }
        </style>
        <div class="zone-container clearfix" on-down="_handleDown">
            <div id="zoneSymbol">
                <div id="alarmImg"></div>
                <div id="rampImg"></div>
                <div id="lowerImg"></div>
                <div id="boostImg"></div>
                <div id="modeImg"></div>
                <div id="zoneId">[[idvalue]]</div>
            </div>
            <div id="zoneActval">[[actvalue]]</div>
            <div id="zoneSetval">[[setvalue]]</div>
            <div id="zoneActvalUnit">[[unittextactval]]</div>
            <div id="zoneSetvalUnit">[[unittextsetval]]</div>
        </div>`;
    }

    /**
     * Returns the defined Polymer properties of the component.
     * @readonly
     * @static
     * @returns {Object} The defined Polymer properties.
     * @memberof LasalRuntimeZoneOvElement
     * 
     * @property {Number}   imagestate          - The state of the image.
    */
    static get properties() {
        const props = {
            alarmimagestate: {
                type: Number,
                value: 1,
                observer: '_onAlaImgStateChange'
            },
            rampimagestate: {
                type: Number,
                value: 1,
                observer: '_onRampImgStateChange'
            },                
            lowerimagestate: {
                type: Number,
                value: 1,
                observer: '_onLowerImgStateChange'
            },
            boostimagestate: {
                type: Number,
                value: 1,
                observer: '_onBoostImgStateChange'
            },
            modeimagestate: {
                type: Number,
                value: 3,
                observer: '_onModeImgStateChange'
            }                      
        }
        return props;
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @param {Number} oldval - Old state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
     _onAlaImgStateChange(newval, oldval) {
        this._changeImgState(this.$.alarmImg, newval);
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @param {Number} oldval - Old state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
     _onRampImgStateChange(newval, oldval) {
        this._changeImgState(this.$.rampImg, newval);
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @param {Number} oldval - Old state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
     _onLowerImgStateChange(newval, oldval) {
        this._changeImgState(this.$.lowerImg, newval);
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @param {Number} oldval - Old state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
     _onBoostImgStateChange(newval, oldval) {
        this._changeImgState(this.$.boostImg, newval);
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @param {Number} oldval - Old state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
    _onModeImgStateChange(newval, oldval) {
        this._changeImgState(this.$.modeImg, newval);
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {html} img - image whiches state needs to be changed
     * @param {Number} state - state of the image
     * @private
     * @memberof LasalRuntimeZoneOvElement
     */
    _changeImgState(img, state) {
        switch (state) {
            case 1:
            case '1':
            case 'Active':
            default:
                img.classList.remove('sig-element-inactive');
                img.classList.remove('sig-element-invisible');
                break;
            case 2:
            case '2':
            case 'Inactive':
                img.classList.add('sig-element-inactive');
                img.classList.remove('sig-element-invisible');
                break;
            case 3:
            case '3':
            case 'Invisible':
                img.classList.add('sig-element-invisible');
                img.classList.remove('sig-element-inactive');
                break;
        }
    }

    /**
     * Gets called if mousedown event on control was recognized
     * @private
     * @todo Handle this in up or tap for better usability.
     * @memberof LasalRuntimeZoneOvElement
     */
    _handleDown() {
        if (!this.isdesignmode) this._dispatchEvent('mousedown');
    }

    /**
     * This observer runs if the property "isstylepreview" changes its value.
     * @private
     * @param {Boolean} newval - New value of the property.
     * @param {Boolean} oldval - Old value of the property.
     * @memberof LasalRuntimeZoneOvElement
     */
    _designerGenerateStylePreview(newval, oldval) {
        if (this.isdesignmode) {
            // Apply the preview value on dashboard & style preview
            if (this.unittextactval === undefined) this.unittextactval = '[Unit]';
            if (this.unittextsetval === undefined) this.unittextsetval = '[Unit]';
            if (newval) {
                // Apply the preview value only in style preview 
                if (this.setvalue === undefined) this.setvalue = '0';
                if (this.actvalue === undefined) this.actvalue = '0';
                if (this.idvalue === undefined) this.idvalue = '0';
            }
        }
    }
}
customElements.define(LasalRuntimeZoneOvElement.is, LasalRuntimeZoneOvElement);
