// Import the Lasal Runtime base element into your component
// Import SigPolymer to use Polymer methods: html, afterNextRender, beforeNextRender, debouncer, timeOut
// or if your component's getter template() returns a HTML literal
import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';


class LasalRuntimeSigControlActValueStraight extends LasalRuntimeSigElement {
    static get is() {
        return "sig-control-actvalue-straight";
    }

    /****************************************************************************************************
     * Returns the Template HTML & CSS of this Control
     *
     * @readonly
     * @static
     * @memberof LasalRuntimeSigControlActValueStraight
     ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`
        <style include="sig-element-css">
            :host {
                --sig-control-actvalue-straight-value-percent: 60%;
                --sig-control-actvalue-straight-value-string-width: auto;
                --sig-control-actvalue-straight-setpoint-percent: 80%;
                --sig-control-actvalue-straight-setpoint-string-width: auto;
                
                display: block;
                position: absolute;
                overflow: hidden;
            }

            :host * {
                margin: 0;
                padding: 0;
                @apply --notextselect;
            }

            .clearfix:after {
                @apply --clearfix;
            }

            .sig-control-actvalue-straight * {
                box-sizing: border-box;
            }
            .sig-control-actvalue-straight {
                width: 100%;
                height: 100%;
                
                color: var(--theme-sig-control-actvalue-straight-font-color, inherit);

                display: flex;
                justify-content: center;
                text-decoration: inherit;
            }
            :host([isvertical]) .sig-control-actvalue-straight {
                flex-direction: column;
            }
            :host(:not([isvertical])[actvalueshow="islefttop"][setpointshow="islefttop"]) .sig-control-actvalue-straight {
                justify-content: flex-end;
            }
            :host(:not([isvertical])[actvalueshow="isrightbottom"][setpointshow="isrightbottom"]) .sig-control-actvalue-straight {
                justify-content: flex-start;
            }
    /* --------------------------------------------------------------------------------------- */
    /* Settings for the Bar                                                                    */
    /* --------------------------------------------------------------------------------------- */
        /* Settings for the Bar Container                                                      */
            #bar-container {
                position: relative;

                flex: 0 0 var(--theme-sig-control-actvalue-straight-bar-container-width, 35px);

                display: flex;
                justify-content: center;
            }
            :host([isvertical]) #bar-container {
                flex-direction: column;
            }
        /* Settings for the Bar                                                                */
            #bar { /* not vertical & not upsidedown */
                /* The Flex-Box is used to get the bar div to the bottom without absolute positioning or similar. */
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                height: 100%;
                /* width is minimized so we have some padding on the left and right of the bar */
                width: var(--theme-sig-control-actvalue-straight-bar-width, 70%);

                background-color: var(--theme-sig-control-actvalue-straight-background-color, inherit);

                border-style: var(--theme-sig-control-actvalue-straight-border-style, none);
                border-width: var(--theme-sig-control-actvalue-straight-border-width, 0px);
                border-color: var(--theme-sig-control-actvalue-straight-border-color, inherit);
                border-radius: var(--theme-sig-control-actvalue-straight-border-radius, 3px);

                overflow: hidden;
            }
            :host([isupsidedown]:not([isvertical])) #bar {
                justify-content: flex-start;
            }
            :host([isvertical]) #bar {
                flex-direction: row;
                width: 100%;
                height: var(--theme-sig-control-actvalue-straight-bar-width, 70%);
            }
            :host([isvertical]:not([isupsidedown])) #bar {
                justify-content: flex-start;
            }
            :host([isvertical][isupsidedown]) #bar {
                justify-content: flex-end;
            }
        /* Settings for the Bar Fill                                                           */
            #bar-act-value-fill {
                background-color: var(--theme-sig-control-actvalue-straight-bar-color, inherit);
                height: var(--sig-control-actvalue-straight-value-percent);
                width: 100%;
            }
            :host([isvertical]) #bar-act-value-fill {
                height: 100%;
                width: var(--sig-control-actvalue-straight-value-percent);
            }
    /* --------------------------------------------------------------------------------------- */
    /* Settings for the Lines                                                                  */
    /* --------------------------------------------------------------------------------------- */
            #bar-container .line-container {
                /* the absolute positioning is needed to position the two line containers (Actvalue and setpoint) on top of the bar */
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /* The Flex-Box is used to get the line div´s to the bottom without absolute positioning or similar. */
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                /*  Set the same border settings as the bar has, so the lines align correctly to the fill of the bar. 
                    Color is set to transparent because it is just needed to have the right width.*/
                border-width: var(--theme-sig-control-actvalue-straight-border-width, 0px);
                border-color: transparent;
                border-radius: var(--theme-sig-control-actvalue-straight-border-radius, 3px);
                /* the border is only needed in the horizontal direction */
                border-top-style: var(--theme-sig-control-actvalue-straight-border-style, none);
                border-right-style: none;
                border-bottom-style: var(--theme-sig-control-actvalue-straight-border-style, none);
                border-left-style: none;
            }
            :host([isupsidedown]:not([isvertical])) #bar-container .line-container {
                justify-content: flex-start;
            }
            :host([isvertical]) #bar-container .line-container {
                flex-direction: row;
                /* the border is only needed in the vertical direction */
                border-top-style: none;
                border-right-style: var(--theme-sig-control-actvalue-straight-border-style, none);
                border-bottom-style: none;
                border-left-style: var(--theme-sig-control-actvalue-straight-border-style, none);
            }
            :host([isvertical]:not([isupsidedown])) #bar-container .line-container {
                justify-content: flex-start;
            }
            :host([isvertical][isupsidedown]) #bar-container .line-container {
                justify-content: flex-end;
            }
            #bar-container .line-container > div {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
            :host([isupsidedown]:not([isvertical])) #bar-container .line-container > div {
                justify-content: flex-end;
            }
            :host([isvertical]) #bar-container .line-container > div {
                flex-direction: row;
            }
            :host([isvertical]:not([isupsidedown])) #bar-container .line-container > div {
                justify-content: flex-end;
            }
            :host([isvertical][isupsidedown]) #bar-container .line-container > div {
                justify-content: flex-start;
            }
            :host([actvalueshow="isrightbottom"]) #act-value-line-container {
                align-items: flex-end;
            }
            #setpoint-line-container > div {
                /* The min and max height setting prevents the line to overflow the bar container 
                it is not done with padding because this would generate an offset between the numbers and the line*/
                height: var(--sig-control-actvalue-straight-setpoint-percent);
                min-height: calc(var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px) * 0.5);
                max-height: calc(100% - calc(var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px) * 0.5));
            }
            :host([isvertical]) #setpoint-line-container > div {
                height: 100%;
                min-height: 0;
                max-height: none;
                width: var(--sig-control-actvalue-straight-setpoint-percent);
                min-width: calc(var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px) * 0.5);
                max-width: calc(100% - calc(var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px) * 0.5));
            }
            #act-value-line-container > div {
                /* The min and max height setting prevents the line to overflow the bar container 
                it is not done with padding because this would generate an offset between the numbers and the line*/
                height: var(--sig-control-actvalue-straight-value-percent);
                min-height: calc(var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px) * 0.5);
                max-height: calc(100% - calc(var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px) * 0.5));
                /** its with is not 100% so it only shows on one side of the bar */
                width: calc( 50% + calc( var(--theme-sig-control-actvalue-straight-bar-width, 70%) * .5) );
            }
            :host([isvertical]) #act-value-line-container > div {
                /** its with is not 100% so it only shows on one side of the bar */
                height: calc( 50% + calc( var(--theme-sig-control-actvalue-straight-bar-width, 70%) * .5) );
                min-height: 0;
                max-height: none;
                width: var(--sig-control-actvalue-straight-value-percent);
                min-width: calc(var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px) * 0.5);
                max-width: calc(100% - calc(var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px) * 0.5));
            }
        /* the actual lines */
            #bar-container .line-container > div > div {
                display: block;
                transform: translateY(-50%);
            }
            :host([isupsidedown]:not([isvertical])) #bar-container .line-container > div > div {
                transform: translateY(50%);
            }
            :host([isvertical]:not([isupsidedown])) #bar-container .line-container > div > div {
                transform: translateX(50%);
            }
            :host([isvertical][isupsidedown]) #bar-container .line-container > div > div {
                transform: translateX(-50%);
            }
            #act-value-line-container > div > div {
                height: var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px);
                width: 100%;
                border-radius: var(--theme-sig-control-actvalue-straight-act-value-line-radius, 0px);
                background-color: var(--theme-sig-control-actvalue-straight-act-value-line-color, inherit);
            }
            :host([isvertical]) #act-value-line-container > div > div {
                height: 100%;
                width: var(--theme-sig-control-actvalue-straight-act-value-line-width, 3px);
            }
            #setpoint-line-container > div > div {
                height: var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px);
                width: 100%;
                border-radius: var(--theme-sig-control-actvalue-straight-setpoint-line-radius, 0px);
                background-color: var(--theme-sig-control-actvalue-straight-setpoint-line-color, inherit);
            }
            :host([isvertical]) #setpoint-line-container > div > div {
                height: 100%;
                width: var(--theme-sig-control-actvalue-straight-setpoint-line-width, 3px);
            }
        /* Style the lines dependence of the attributes */
            :host([actvalueshow="ishidden"]) #act-value-line-container {
                display: none;
            }
            :host([setpointshow="ishidden"]) #setpoint-line-container {
                display: none;
            }
    /* --------------------------------------------------------------------------------------- */
    /* Settings for the Values Containers                                                      */
    /* --------------------------------------------------------------------------------------- */
            .value-container { /* not vertical & not upsidedown */
                flex: 1 1 0;
                /*  Flex box needed so the containers for the numbers can be positioned properly
                    with the height of the containers the positione gets altered
                    the numbers get centered with a translate command
                    the offset due to the translate command gets compensated with the min and max settings on the container for the numbers */
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                padding: 0 5px;
            }
            :host(:not([isvertical])[actvalueshow="islefttop"][setpointshow="islefttop"]) .value-container,
            :host(:not([isvertical])[actvalueshow="isrightbottom"][setpointshow="isrightbottom"]) .value-container {
                flex: 0 1 0;
            }
            :host([isvertical]) .value-container {
                flex: 0 1 0;
                flex-direction: row;
                
                padding: 5px 0;
            }
            :host([isupsidedown]:not([isvertical])) .value-container {
                justify-content: flex-start;
            }
            :host([isvertical]:not([isupsidedown])) .value-container {
                justify-content: flex-start;
            }
            :host([isvertical][isupsidedown]) .value-container {
                justify-content: flex-end;
            }
            .value-container div { /* not vertical & not upsidedown */
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
            :host([isvertical]) .value-container div {
                flex-direction: row;
            }
            :host([isupsidedown]:not([isvertical])) .value-container div {
                justify-content: flex-end;
            }
            :host([isvertical]:not([isupsidedown])) .value-container div {
                justify-content: flex-end;
            }
            :host([isvertical][isupsidedown]) .value-container div {
                justify-content: flex-start;
            }
            #setpoint-value-container div { /* not vertical & (not upsidedown & upsidedown) */
                width: 100%;
                min-width: 0;
                max-width: none;
                height: var(--sig-control-actvalue-straight-setpoint-percent);
                min-height: 0.5em;
                max-height: calc(100% - .5em);
            }
            :host([isvertical]) #setpoint-value-container div {
                width: var(--sig-control-actvalue-straight-setpoint-percent);
                min-width: calc(calc(var(--sig-control-actvalue-straight-setpoint-string-width) * .5) + var(--sig-control-actvalue-straight-additional-width-if-italic, 0px));
                max-width: calc(calc(100% - calc(var(--sig-control-actvalue-straight-setpoint-string-width) * .5)) - var(--sig-control-actvalue-straight-additional-width-if-italic, 0px));
                height: 100%;
                min-height: 0;
                max-height: none;
            }
            #act-value-container div { /* not vertical & (not upsidedown & upsidedown) */
                width: 100%;
                min-width: 0;
                max-width: none;
                height: var(--sig-control-actvalue-straight-value-percent);
                min-height: 0.5em;
                max-height: calc(100% - .5em);
            }
            :host([isvertical]) #act-value-container div {
                width: var(--sig-control-actvalue-straight-value-percent);
                min-width: calc(calc(var(--sig-control-actvalue-straight-value-string-width) * .5) + var(--sig-control-actvalue-straight-additional-width-if-italic, 0px));
                max-width: calc(calc(100% - calc(var(--sig-control-actvalue-straight-value-string-width) * .5)) - var(--sig-control-actvalue-straight-additional-width-if-italic, 0px));
                height: 100%;
                min-height: 0;
                max-height: none;
            }

            :host(:not([isvertical])[displayunitvalue="above"]) #act-value-container div,
            :host(:not([isvertical])[displayunitvalue="under"]) #act-value-container div,
            :host(:not([isvertical])[displayunitsetpoint="above"]) #setpoint-value-container div,
            :host(:not([isvertical])[displayunitsetpoint="under"]) #setpoint-value-container div {
                min-height: 1.5em;
                max-height: calc(100% - 1.5em);
            }

            .value-container div p {
                display: inline;
                margin: 0;
                transform: translateY(-50%);
                white-space: nowrap;
            }
            .line {
                flex-shrink: 0;
            }
            :host([isupsidedown]:not([isvertical])) .value-container div p {
                transform: translateY(50%);
            }
            :host([isvertical]:not([isupsidedown])) .value-container div p {
                transform: translateX(50%);
            }
            :host([isvertical][isupsidedown]) .value-container div p {
                transform: translateX(-50%);
            }
        /* Set the Position of the Value Containers and position relative settings */
            .value-container[islefttop] div {
                align-items: flex-end;
            }
            .value-container[isrightbottom] div {
                align-items: flex-start;
            }
            .value-container[ishidden] {
                display: none;
            }
            :host([actvalueshow="islefttop"]) #act-value-container {
                order: -1;
                align-items: flex-end;
            }
            :host([setpointshow="islefttop"]) #setpoint-value-container {
                order: -2;
                align-items: flex-end;
            }
            :host([actvalueshow="isrightbottom"]) #act-value-container {
                order: 1;
            }
            :host([setpointshow="isrightbottom"]) #setpoint-value-container {
                order: 2;
            }
            :host([setpointshow="isrightbottom"]) #setpoint-value-container div,
            :host([actvalueshow="isrightbottom"]) #act-value-container div {
                align-items: flex-start;
            }
            :host([setpointshow="islefttop"]) #setpoint-value-container div,
            :host([actvalueshow="islefttop"]) #act-value-container div {
                align-items: flex-end;
            }
            :host([actvalueshow="ishidden"]) #act-value-container {
                display: none;
            }
            :host([setpointshow="ishidden"]) #setpoint-value-container {
                display: none;
            }

        </style>
        <div class="sig-control-actvalue-straight clearfix">
            <div id="act-value-container" class="value-container">
                <div>
                    <p id="act-value-text">60°C</p>
                </div>
            </div>
            <div id="bar-container">
                <div id="bar">
                    <div id="bar-act-value-fill"></div>
                </div>
                <div id="act-value-line-container" class="line-container">
                    <div>
                        <div class="line"></div>
                    </div>
                </div>
                <div id="setpoint-line-container" class="line-container">
                    <div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <div id="setpoint-value-container" class="value-container">
                <div>
                    <p id="setpoint-value-text">80°C</p>
                </div>
            </div>
        </div>
        `;
    }

    /**********************************************************************************************************************************************************
     * define the main porperties of the component
     * reflected property names should always be lower case so it can be used directly on the element as an attribute
    ***********************************************************************************************************************************************************/
    static get properties() {
        let props = {
            valueuc: {
                type: Number,
                value: '',
                observer: '_valueChanged'
            },
            unittextvalue: {
                type: String,
                value: '',
                observer: '_updateUnitValue'
            },
            actvalueshow: {
                type: String,
                value: 'islefttop',
                reflectToAttribute: true
            },
            displayunitvalue: {
                type: String,
                value: 'post',
                observer: '_unitValueDisplayChanged',
                reflectToAttribute: true
            },
            minvalueuc: {
                type: Number,
                value: 0,
                observer: '_minChanged'
            },
            maxvalueuc: {
                type: Number,
                value: 100,
                observer: "_maxChanged"
            },
            setpointuc: {
                type: Number,
                value: '',
                observer: '_setpointChanged'
            },
            unittextsetpoint: {
                type: String,
                value: '',
                observer: '_updateUnitSetpoint'
            },
            setpointshow: {
                type: String,
                value: 'isrightbottom',
                reflectToAttribute: true
            },
            displayunitsetpoint: {
                type: String,
                value: 'post',
                observer: '_unitSetpointDisplayChanged',
                reflectToAttribute: true
            },
            isvertical: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            isupsidedown: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            previewvalue: {
                type: Number,
                value: 60,
                observer: '_updateBar'
            },
            previewsetpoint: {
                type: Number,
                value: 80,
                observer: '_updateBar'
            },
            previewmin: {
                type: Number,
                value: 0,
                observer: '_updateBar'
            },
            previewmax: {
                type: Number,
                value: 100,
                observer: '_updateBar'
            }
        }
        return props;
    }

    /****************************************************************************************************
     * Creates an instance of LasalRuntimeSigControlActValueStraight.
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    constructor() {
        super();

        this.rendered = false;
        this.valuesInitialized = false;

        // add predefined properties - uncomment those you need
        this.addPredefProps([
            {
                src: 'value',
                dest: 'unittextvalue',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNIT_TEXT
            },
            {
                src: 'setpoint',
                dest: 'unittextsetpoint',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNIT_TEXT
            },
            {
                src: 'value',
                dest: 'valueuc',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNCONVERTED_VALUE
            },
            {
                src: 'minvalue',
                dest: 'minvalueuc',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNCONVERTED_VALUE
            },
            {
                src: 'maxvalue',
                dest: 'maxvalueuc',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNCONVERTED_VALUE
            },
            {
                src: 'setpoint',
                dest: 'setpointuc',
                type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_UNCONVERTED_VALUE
            }
        ]);

        // define required properties
        this.sigAddRequiredProperty('valueuc');
        this.sigAddRequiredProperty('minvalueuc');
        this.sigAddRequiredProperty('maxvalueuc');
        this.sigAddRequiredProperty('setpointuc');
    }

    /****************************************************************************************************
     * called after property default values are set and local DOM is initialized
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    ready() {
        super.ready();

        // I need this variable to check if I can get a width from the divs in the component
        this.rendered = true;

        //check if values initialized
        if ((this.valuesInitialized) || (this.isdesignmode)) {
            this._updateBar();
        }
    }

     /****************************************************************************************************
      * Gets called if required properties are ready
      *
      * @memberof LasalRuntimeSigControlActValueStraight
     ****************************************************************************************************/
     sigOnRequiredPropertiesReady () {
        super.sigOnRequiredPropertiesReady();       
        this.valuesInitialized = true;
        if (this.rendered) {
            this._updateBar();
        } 
    }

    /****************************************************************************************************
     * this method outputs the act. value with the unit 
     * for the unit it considers the actuall display settings for it (displayunitvalue)
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _outputValue() {
        let valueString = '';
        let value = 0;
        if (this.isdesignmode) {
            value = this.previewvalue;
        } else {
            value = this.value;
        }
        //Output the Value
        if (this.displayunitvalue === 'ishidden') {
            valueString = String(value);
        } else if (this.displayunitvalue === 'post') {
            valueString = String(value) + ' ' + this.unittextvalue;
        } else if (this.displayunitvalue === 'pre') {
            valueString = this.unittextvalue + ' ' + String(value);
        } else if (this.displayunitvalue === 'under') {
            valueString = String(value) + '<BR/>' + this.unittextvalue;
        } else if (this.displayunitvalue === 'above') {
            valueString = this.unittextvalue + '<BR/>' + String(value);
        }
        this.$["act-value-text"].innerHTML = valueString;
        this.updateStyles({
            '--sig-control-actvalue-straight-value-string-width': String(this.$["act-value-text"].offsetWidth) + 'px'
        });
    }

    /****************************************************************************************************
     * this method outputs the setpoint with the unit
     * for the unit it considers the actuall display settings for it (displayunitsetpoint)
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _outputSetpoint() {
        let valueString = '';
        let value = 0;
        if (this.isdesignmode) {
            value = this.previewsetpoint;
        } else {
            value = this.setpoint;
        }
        //Output the Value
        if (this.displayunitsetpoint === 'ishidden') {
            valueString = String(value);
        } else if (this.displayunitsetpoint === 'post') {
            valueString = String(value) + ' ' + this.unittextsetpoint;
        } else if (this.displayunitsetpoint === 'pre') {
            valueString = this.unittextsetpoint + ' ' + String(value);
        } else if (this.displayunitsetpoint === 'under') {
            valueString = String(value) + '<BR/>' + this.unittextsetpoint;
        } else if (this.displayunitsetpoint === 'above') {
            valueString = this.unittextsetpoint + '<BR/>' + String(value);
        }
        this.$["setpoint-value-text"].innerHTML = valueString;
        this.updateStyles({
            '--sig-control-actvalue-straight-setpoint-string-width': String(this.$["setpoint-value-text"].offsetWidth) + 'px'
        });
    }

     /****************************************************************************************************
      * Handles changes to the minvalue
      * get the unformatted value for calculation of bar
      *
      * @param {Number} newValue
      * @memberof LasalRuntimeSigControlActValueStraight
     ****************************************************************************************************/
     _minChanged(newValue) {
        //check for designmode
        if (!this.isdesignmode) {        
            this._updateBar();
        }     
    }

    /****************************************************************************************************
     * Handles changes to the maxvalue
     * get the unformatted value for calculation of bar
     *
     * @param {Number} newValue
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _maxChanged(newValue) {
        //check for designmode
        if (!this.isdesignmode) {
            this._updateBar();
        }    
    }

    /****************************************************************************************************
     * It is the observer for the actuall value
     * it handels everything what should happen as soon as the actuall value changes
     *
     * @param {Number} newValue
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _valueChanged(newValue) {
        //check for designmode
        if (!this.isdesignmode) {
            this._updateBar();
        }          
    }

    /****************************************************************************************************
     * It is the observer for the setpoint
     * it handels everything what should happen as soon as the setpoint changes
     *
     * @param {Number} newValue
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _setpointChanged(newValue) {
        //check for designmode
        if (!this.isdesignmode) {
            this._updateBar();
        }            
    }

    /****************************************************************************************************
     * calulate bar values
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _updateBar() {
        // set the width
        if (this.rendered) {
            let percentAct;
            let percentSet;
            if (this.isdesignmode) {
                percentAct = this._getPercent(this.previewvalue, this.previewmin, this.previewmax);
                percentSet = this._getPercent(this.previewsetpoint, this.previewmin, this.previewmax);
            } else {
                percentAct = this._getPercent(this.valueuc, this.minvalueuc, this.maxvalueuc);
                percentSet = this._getPercent(this.setpointuc, this.minvalueuc, this.maxvalueuc);
            }
            this._outputValue();
            this._outputSetpoint();
            this.updateStyles({
                '--sig-control-actvalue-straight-value-percent': String(percentAct) + '%',
                '--sig-control-actvalue-straight-setpoint-percent': String(percentSet) + '%'
            });
        }      
    }    

    /****************************************************************************************************
     * It is the observer for the unit of the actuall value
     * it handels everything what should happen as soon as the unit of the act. value changes
     *
     * @param {Number} newValue
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _updateUnitValue(newValue) {        
        this.unittextvalue = newValue;
        this._outputValue();
    }

    /****************************************************************************************************
     * It is the observer for the unit of the setpoint
     * it handels everything what should happen as soon as the unit of the setpoint changes
     *
     * @param {Number} newValue
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _updateUnitSetpoint(newValue) {
        this.unittextsetpoint = newValue;
        this._outputSetpoint();
    }

    /****************************************************************************************************
     * It is the observer for the setting of the unit display option for the act. value
     * it handels everything what should happen as soon as the unit display option of the act. value changes
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _unitValueDisplayChanged() {
        this._outputValue();
    }

    /****************************************************************************************************
     * It is the observer for the setting of the unit display option for the setpoint
     * it handels everything what should happen as soon as the unit display option of the setpoint changes
     *
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _unitSetpointDisplayChanged() {
        this._outputSetpoint();
    }

    /****************************************************************************************************
     * This method is used to calculate a act. value into percentage
     *
     * @param {Number} value this is the value which should be calculated
     * @param {Number} min defines the minimum value
     * @param {Number} max defines the minimum value
     * @return {*} percentage of the input value relative to the size of the bar
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    _getPercent(value, min, max) {

        //The whole value range
        const length = max - min;

        // The Position of this.value within that range
        const val = value - min;

        let percent = (val / length);
        
        //avoid calulating with Nan
        if(isNaN(percent)) {
            percent = 0;
        }
        percent *= 100;

        if (percent < 0) {
            // Make sure the bar is at lease 0% filled
            percent = 0;
        } else if (percent > 100) {
            // Make sure the bar is at most 100 % filled
            percent = 100;
        }
        return percent;
    }

    /****************************************************************************************************
     * This Method is called if the font changes or is beeing set.
     * Here we have the possibility to set actions according to the font settings.
     *
     * @param {String} propName
     * @param {Object} fontObj
     * @return {*} 
     * @memberof LasalRuntimeSigControlActValueStraight
    ****************************************************************************************************/
    sigApplyFontObject(propName, fontObj) {
        super.sigApplyFontObject(propName, fontObj);

        if (fontObj.italic) {
            this.updateStyles({
                '--sig-control-actvalue-straight-additional-width-if-italic': String(fontObj.size * 0.1) + 'px'
            });
        }
        if(!this.isConnected) return;
        if (fontObj.underline) {
            this.$["setpoint-value-text"].style.textDecoration = "underline";
            this.$["act-value-text"].style.textDecoration = "underline";
        }
        else {
            this.$["setpoint-value-text"].style.textDecoration = "none";
            this.$["act-value-text"].style.textDecoration = "none";
        }
    }
}
customElements.define(LasalRuntimeSigControlActValueStraight.is, LasalRuntimeSigControlActValueStraight);

