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

/**
 * @class
 * @classdesc Implements and exports the ght-group-overview control.
 * @version 01.00.000
 * @extends LasalRuntimeSigElement
 * @property {String}   idvalue     - The value of the group 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}   actvalueunit- The unit text of the value. Default is undefined.
 */
export class LasalRuntimeGroupOvElement extends LasalRuntimeSigElement {

    /**
    * Creates an instance of LasalRuntimeGroupOvElement.
    * @constructor
    * @memberof LasalRuntimeGroupOvElement
    */
    constructor() {
        super();
        this.addPredefProps([{
            src: 'actvalue',
            dest: 'actvalueunit',
            type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNIT_TEXT
        }]);
        this.addPredefProps([{
            src: 'actpowerconsumption',
            dest: 'actpowerconsumptionunit',
            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 LasalRuntimeGroupOvElement
     */
    static get is() {
        return "ght-group-overview";
    }

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

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

            .group-container {
                position:relative;
                width: 100%;
                height: 100%;

                display: flex;
                flex-direction: column;
            }

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

            #groupImg {
                position: absolute;
                background-image: var(--ght-group-overview-background-image, none);
                background-repeat: var(--theme-sig-control-image-background-repeat, no-repeat);
                background-size: contain;
                margin-top: var(--ght-group-overview-image-top, 0px);
                margin-left: var(--ght-group-overview-image-left, 0px);
                width: var(--ght-group-overview-image-width, 20px);
                height: var(--ght-group-overview-image-height, 20px);
            }

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

                color: var(--ght-group-overview-groupid-color, inherit);

                text-align: var(--ght-group-overview-groupid-align, center);

                top: var(--ght-group-overview-groupid-top, 0px);
                left: var(--ght-group-overview-groupid-left, 0px);

                width: var(--ght-group-overview-groupid-width, 30px);
                height: var(--ght-group-overview-groupid-height, 10px);                           
            }

            #groupName {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;
                
                color: var(--ght-group-overview-groupname-color, inherit);

                text-align: var(--ght-group-overview-groupname-align, center);

                top: var(--ght-group-overview-groupname-top, 0px);
                left: var(--ght-group-overview-groupname-left, 0px);

                width: var(--ght-group-overview-groupname-width, 30px);
                height: var(--ght-group-overview-groupname-height, 10px);
            }

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

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

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

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

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

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

                color: var(--ght-group-overview-actvalunit-color, inherit);

                text-align: var(--ght-group-overview-actvalunit-align, right);

                top: var(--ght-group-overview-actvalunit-top, 0px);
                left: var(--ght-group-overview-actvalunit-left, 0px);

                width: var(--ght-group-overview-actvalunit-width, 30px);
                height: var(--ght-group-overview-actvalunit-height, 10px);  
            }

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

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

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

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

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

            #color {
                border: 1px solid white;
                height: var(--ght-group-color-height, 20px);
                background-color: var(--ght-group-color-background-color, transparent)
            }                              

            #generalInfo {
                height: var(--ght-group-general-info-height, 40px);
                background-color: var(--ght-group-general-info-background-color, transparent)
            }

            #actpowerconsumption {
                height: var(--ght-group-act-power-consumption-height, 15px);
                background-color: var(--ght-group-act-power-consumption-background-color, transparent)
            }

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

                color: var(--ght-group-overview-actpowerconsumptionlabel-color, inherit);

                text-align: var(--ght-group-overview-actpowerconsumptionlabel-align, center);

                top: var(--ght-group-overview-actpowerconsumptionlabel-top, 0px);
                left: var(--ght-group-overview-actpowerconsumptionlabel-left, 0px);

                width: var(--ght-group-overview-actpowerconsumptionlabel-width, 30px);
                height: var(--ght-group-overview-actpowerconsumptionlabel-height, 10px);  
            }

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

                color: var(--ght-group-overview-actpowerconsumptionunit-color, inherit);

                text-align: var(--ght-group-overview-actpowerconsumptionunit-align, right);

                top: var(--ght-group-overview-actpowerconsumptionunit-top, 0px);
                left: var(--ght-group-overview-actpowerconsumptionunit-left, 0px);

                width: var(--ght-group-overview-actpowerconsumptionunit-width, 30px);
                height: var(--ght-group-overview-actpowerconsumptionunit-height, 10px);  
            }

            #groupramp {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;
                
                background-image: var(--ght-group-overview-groupramp-background-image, none);
                background-repeat: var(--ght-group-overview-groupramp-background-repeat, no-repeat);

                background-size: contain;
                background-position:center;

                top: var(--ght-group-overview-groupramp-top, 0px);
                left: var(--ght-group-overview-groupramp-left, 0px);

                width: var(--ght-group-overview-groupramp-width, 30px);
                height: var(--ght-group-overview-groupramp-height, 10px);  
            }

            #groupboost {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;
                
                background-image: var(--ght-group-overview-groupboost-background-image, none);
                background-repeat: var(--ght-group-overview-groupboost-background-repeat, no-repeat);

                background-size: contain;
                background-position:center;

                top: var(--ght-group-overview-groupboost-top, 0px);
                left: var(--ght-group-overview-groupboost-left, 0px);

                width: var(--ght-group-overview-groupboost-width, 30px);
                height: var(--ght-group-overview-groupboost-height, 10px);  
            }

            #grouplower {
                position: absolute;
                text-decoration: inherit;
                overflow: hidden;
                
                background-image: var(--ght-group-overview-grouplower-background-image, none);
                background-repeat: var(--ght-group-overview-grouplower-background-repeat, no-repeat);

                background-size: contain;
                background-position:center;

                top: var(--ght-group-overview-grouplower-top, 0px);
                left: var(--ght-group-overview-grouplower-left, 0px);

                width: var(--ght-group-overview-grouplower-width, 30px);
                height: var(--ght-group-overview-grouplower-height, 10px);  
            }
        </style>
        <div class="group-container clearfix" on-down="_handleDown">
            <div id="color">
                <div id="groupId">[[groupid]]</div>
                <div id="groupName">[[groupname]]</div>
            </div>
            <div id="generalInfo">
                <div id="groupSymbol">
                    <div id="groupramp"></div>
                    <div id="groupboost"></div>
                    <div id="grouplower"></div>
                </div>
                <div id="groupActval">[[actvalue]]</div>
                <div id="groupActvalUnit">[[actvalueunit]]</div>
                <div id="groupSetval">[[setvalue]]</div>
            </div>
            <div id="actpowerconsumption">
                <div id="actPowerConsumptionLabel">[[actpowerconsumption]]</div>
                <div id="actPowerConsumptionUnit">[[actpowerconsumptionunit]]</div>
            </div>
        </div>`;
    }

    /**
     * Returns the defined Polymer properties of the component.
     * @readonly
     * @static
     * @returns {Object} The defined Polymer properties.
     * @memberof LasalRuntimeGroupOvElement
     * 
     * @property {Number}   imagestate          - The state of the image.
    */
    static get properties() {
        const props = {
            imagestategroupramp: {
                type: Number,
                value: 1,
                observer: '_onImgStategrouprampChange'
            },
            imagestategroupboost: {
                type: Number,
                value: 1,
                observer: '_onImgStategroupboostChange'
            },
            imagestategrouplower: {
                type: Number,
                value: 1,
                observer: '_onImgStategrouplowerChange'
            },
            groupcolor: {
                type: Number,
                value: 0,
                observer: '_onGroupcolorChange'
            }
        }
        return props;
    }

    /**
     * Observer method which gets called if the color of the group changes.
     * @param {Number} newval - New state of the image
     * @private
     * @memberof LasalRuntimeGroupOvElement
     */
    _onGroupcolorChange() {
        if(this.groupcolor || this.groupcolor === 0) {
            this.updateStyles({
                '--ght-group-color-background-color': '#'+this.groupcolor.toString(16).padStart(4, '0')
            })
        }
        
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @private
     * @memberof LasalRuntimeGroupOvElement
     */
    _onImgStategrouprampChange(newval) {
        this._changeImgState(this.$.groupramp, newval)
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @private
     * @memberof LasalRuntimeGroupOvElement
     */
    _onImgStategroupboostChange(newval) {
        this._changeImgState(this.$.groupboost, newval)
    }

    /**
     * Observer method which gets called if the state of the image changes.
     * @param {Number} newval - New state of the image
     * @private
     * @memberof LasalRuntimeGroupOvElement
     */
    _onImgStategrouplowerChange(newval) {
        this._changeImgState(this.$.grouplower, 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 LasalRuntimeGroupOvElement
     */
      _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 LasalRuntimeGroupOvElement
     */
    _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 LasalRuntimeGroupOvElement
     */
    _designerGenerateStylePreview(newval, oldval) {
        if (this.isdesignmode) {
            // Apply the preview value on dashboard & style preview
            if (this.actvalueunit === undefined) this.actvalueunit = '[Unit]';
            if (this.actpowerconsumptionunit === undefined) this.actpowerconsumptionunit = '[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(LasalRuntimeGroupOvElement.is, LasalRuntimeGroupOvElement);
