import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
import '../sig-control-checkbox/sig-control-checkbox.js';
import '../sig-control-enum/sig-control-enum.js';
import '../sig-control-titlebar/sig-control-titlebar.js';
import '../sig-control-text/sig-control-text.js';

/**
 * `my-osci`
 * osci for synthesa
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class LasalRuntimeSigDaScaleSettings extends LasalRuntimeSigElement {
    static get is() {
        return 'sig-control-da-scalesettings';
    }

    static get importMeta() {
        return import.meta;
    }
  
    /****************************************************************************************************
     * Return the component style and template as a template literal
     *
     * @readonly
     * @static
     ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`

        <style include="sig-element-css">
            :host {
                display: block;
                position: absolute;
                overflow: hidden;
            }

            :host * {
                margin: 0;
                padding: 0
            }

            :host([isdesignmode]:hover) {
                background-color: var(white, rgba(255, 255, 255, .3))
            }

            :host([hidetitle]) #title {
                display: none !important;
            }

            .sig-control-da-scalesettings {
                width: 100%;
                height: 100%;
                position: relative;
            }

            #container {
                display: inline;
            }

            #content {
                position: relative;
                height: calc(100% - var(--theme-sig-control-da-titlebar-height, 26px) - var(--theme-sig-control-da-scalesettings-border-width, 1px));
                color: var(--theme-sig-control-da-scalesettings-text-color);
                background-color: var(--theme-sig-control-da-scalesettings-background-color);
                border-color: var(--theme-sig-control-da-scalesettings-border-color);
                border-width: var(--theme-sig-control-da-scalesettings-border-width, 1px);
                border-left-style: var(--theme-sig-control-da-scalesettings-border-style, solid);
                border-right-style: var(--theme-sig-control-da-scalesettings-border-style, solid);
                border-top-style: none;
                border-bottom-style: var(--theme-sig-control-da-scalesettings-border-style, solid);
                border-radius: var(--theme-sig-control-da-scalesettings-border-radius, 0px);
            }

            #grid {
                display: grid;
                grid-template-columns: auto auto;
                grid-gap: 5px;
                text-align: left;
                padding: 5px;
            }

            #box {
                padding: 1px;
                display: flex;
                align-items: center;
            }

            .sectionLabel {
                text-align: left;
                text-transform: uppercase;
                --theme-sig-control-text-color: var(--theme-sig-control-da-headertext-color, white);
                padding-bottom: 3px;
                grid-column: 1/-1;
            }

            :host sig-control-text
            {
                height: auto;
                padding-left: 0px;
                top: 0px;
                left: 0px;
                position: relative;       
            }

            :host sig-control-titlebar {
                position: unset;
                display: block;
                --theme-sig-control-titlebar-border-color: var(--theme-sig-control-da-titlebar-border-color);
                --theme-sig-control-titlebar-border-style: var(--theme-sig-control-da-titlebar-border-style, solid);
                --theme-sig-control-titlebar-border-radius: var(--theme-sig-control-da-titlebar-border-radius, 0px);
                --theme-sig-control-titlebar-border-width: var(--theme-sig-control-da-titlebar-border-width, 1px);
                --theme-sig-control-titlebar-background-color: var(--theme-sig-control-da-titlebar-background-color);
                --theme-sig-control-titlebar-color: var(--theme-sig-control-da-titlebar-color);
                --theme-sig-control-titlebar-value-align: var(--theme-sig-control-da-titlebar-text-align, center);
                --theme-sig-control-titlebar-height: var(--theme-sig-control-da-titlebar-height, 26px);
                --theme-sig-control-titlebar-border-shadow-size: var(--theme-sig-control-da-titlebar-border-shadow-size, 0px);
                --theme-sig-control-titlebar-border-shadow-color: var(--theme-sig-control-da-titlebar-border-shadow-color);
            }

            :host sig-control-checkbox {
                position: relative;
                --theme-sig-element-top: 0px;
                --theme-sig-element-left: 0px;
                --theme-sig-element-height: var(--theme-sig-control-da-checkbox-height, 30px);
                --theme-sig-element-width: var(--theme-sig-control-da-checkbox-width, 30px);
                --theme-sig-control-checkbox-checkmark-size: var(--theme-sig-control-da-checkbox-checkmark-size, 24px);
                --theme-sig-control-checkbox-background-color: var(--theme-sig-control-da-checkbox-background-color);
                --theme-sig-control-checkbox-checkmark-background-color: var(--theme-sig-control-da-checkbox-checkmark-background-color);
                --theme-sig-control-checkbox-checkmark-color: var(--theme-sig-control-da-checkbox-checkmark-color);
                border-color: var(--theme-sig-control-da-checkbox-border-color);
                border-width: var(--theme-sig-control-da-checkbox-border-width, 1px);
                border-style: var(--theme-sig-control-da-checkbox-border-style, solid);
                border-radius: var(--theme-sig-control-da-checkbox-border-radius, 0px);
            }

            :host sig-control-enum
            {
                position: relative;

                --theme-sig-element-top: 0px;
                --theme-sig-element-left: 0px;
                --theme-sig-element-height: 30px; 
                --theme-sig-element-width: 190px; 
                
                --theme-sig-control-enum-color: inherit;

                --theme-sig-control-enum-background-color: inherit;
                --theme-sig-control-enum-background-color-stop: inherit;

                --theme-sig-control-enum-pressed-background-color: inherit;
                --theme-sig-control-enum-pressed-background-color-stop: inherit;
                
                --theme-sig-control-enum-border-color: inherit;
                --theme-sig-control-enum-border-width: inherit;
                --theme-sig-control-enum-border-style: inherit;
                --theme-sig-control-enum-border-radius: inherit;

                --theme-sig-control-enum-activeoption-text-align: inherit;
            }

        </style>

        <div id="container">
            <div id="title">
                <sig-control-titlebar id="titlebar" value=[[caption]] shadowactive="[[shadowactive]]" applybordereffect="[[applybordereffect]]"></sig-control-titlebar>
            </div>         
            <div id="content">
                <slot id="slot" name="composite"></slot>
                <div id="grid">
                    <div id="box" class="sectionLabel">
                        <sig-control-text id="textScale" sigtext=[[labelScale]]></sig-control-text>
                    </div>
                    <!-- <div id="box">
                        <sig-control-checkbox id="cbYAxisActive" value="1" checked="1" disabled/>
                    </div>
                    <div id="box">
                        <sig-control-text id="textYAxisActive" sigtext=[[labelYAxisActive]]></sig-control-text>
                    </div> -->
                    <div id="box">
                        <sig-control-checkbox id="cbYAxisPosition" disabled/>
                    </div>
                    <div id="box">
                        <sig-control-text id="textTurnYAxis" sigtext=[[labelTurnYAxis]]></sig-control-text>
                    </div>
                    <div id="box" class="sectionLabel">
                        <sig-control-text id="textUnitPosition" sigtext=[[labelUnitPosition]]></sig-control-text>
                    </div>
                    <div id="box" style="grid-column: 1/-1;">
                        <sig-control-enum id="enumUnitPosition"></sig-control-enum>
                    </div>
                </div>
            </div>
        </div>`;
    }
        
    static get properties() {
        return {
            caption: {
                type: String,
                value: "SCALE SETTINGS"
            },
            labelScale: {
                type: String,
                value: "Scale"
            },
            labelYAxisActive: {
                type: String,
                value: "Y-Axis active"
            },
            labelTurnYAxis: {
                type: String,
                value: "Turn Y-Axis position"
            },
            labelUnitPosition: {
                type: String,
                value: "Unit position"
            },
            unitPositionValues:
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "Top"
                            }, {
                                "id": 1,
                                "name": "Bottom"
                            }, {
                                "id": 2,
                                "name": "Hide"
                            }]
                }
            },
            unitPositionValues_lang:
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "Top"
                            }, {
                                "id": 1,
                                "name": "Bottom"
                            }, {
                                "id": 2,
                                "name": "Hide"
                            }]
                }
            },
            compositeActive: {
                type: Boolean,
                value: false
            },
            shadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            applybordereffect: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
            },
            hidetitle: {
                type: Boolean,
                value: false,
                reflectToAttribute: true,
                observer: '_hidetitlechanged'
            },
            hideaxisactive: {
                type: Boolean,
                observer: '_hideaxisactivechanged'
            },
            hideturnposition: {
                type: Boolean,
                observer: '_hideturnpositionchanged'
            },
            textlistname: {
                type: String,
                value: "DataAnalyzer"
            },
            textlistprefix: {
                type: String,
                value: "ScaleSettings_"
            }
        };
    }

    constructor() {
        super()

            // Create shortcuts to the common apis. This makes the code more readable
        if (window.sigApi) {
            this.utilsApi = window.sigApi.sigUtils;
            this.evtMedApi = window.sigApi.eventMediator;
            this.evtApi = window.sigApi.events;
            this.tmApi = window.sigApi.textManager;
            this.smApi = window.sigApi.stationManager; 
        } else {
            this._log('API not ready!', 'ERROR');
        }

        this._isRendered = false; //handler for getting info if the values are already rendered or not
    }

    ready() {
        super.ready();
        
        if (!this.isdesignmode) { //not possible in design mode, VISU designer is not prepared for that
            this._handleComposite(); //initialize composite control

            console.log("Scale Settings - ready");

            if (DataRepository.isDataLoaded() && this._isRendered) {
                if (DataRepository.getSelectedChannel() != '') {

                    this._scaleSettingsChangedListener({ detail: {
                        scaleSettings: DataRepository.getScaleSettings(DataRepository.getSelectedChannel())
                    }});
                }
            }
            
            this.onUnitPositionChangedHandler = (evt) => { this.onUnitPositionChanged(evt) };
            // this.onYAxisActiveChangedHandler = (evt) => { this.onYAxisActiveChanged(evt) };
            this.onYAxisPositionChangedHandler = (evt) => { this.onYAxisPositionChanged(evt) };
        }

        if (this.compositeActive && !this.isdesignmode && !this.smApi.isInOfflinePreview()) //if composite control is active
        {                   
            //If we have the composite control, get the vm, so we can access the components via name
            const ccVm = window.sigApi.vm.getVmById(this.compositeControl.id);
            //If we have the viewModel, get the domRefs to the controls
            if (ccVm) {
                // this.cbYAxisActive = ccVm.getChildByName('cbYAxisActive')?.getDomRef();
                if (ccVm.getChildByName('cbYAxisPosition')) {
                    this.cbYAxisPosition = ccVm.getChildByName('cbYAxisPosition').getDomRef();
                }

                if (ccVm.getChildByName('enumUnitPosition')) {
                    this.enumUnitPosition = ccVm.getChildByName('enumUnitPosition').getDomRef();
                }

                if (this.enumUnitPosition) {
                    this.enumUnitPosition.context = this.context;   
                    this.enumUnitPosition.valueoptions = this.unitPositionValues_lang;
                    if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
                    if (!DataRepository.isDataLoaded()
                        || DataRepository.getSelectedChannel() == '') {
                                this.enumUnitPosition.state = 2; //not active
                                this.enumUnitPosition.style.opacity = "0.5";
                        } 
                    } else {
                        this.enumUnitPosition.state = 2; //not active
                        this.enumUnitPosition.style.opacity = "0.5";
                    }

                    this.enumUnitPosition.addEventListener('sig-control-enum-value-changed', this.onUnitPositionChangedHandler);                            
                }

                // if (this.cbYAxisActive) {
                //     this.cbYAxisActive.disabled = true;

                //     this.cbYAxisActive.addEventListener('sig-control-checkbox-value-changed', this.onYAxisActiveChangedHandler);
                // }

                if (this.cbYAxisPosition) {
                    this.cbYAxisPosition.disabled = true;

                    this.cbYAxisPosition.addEventListener('sig-control-checkbox-value-changed', this.onYAxisPositionChangedHandler);
                }
            }
        }
        else //if composite control is not active
        {
            if (this.$.textScale) {
                this.$.textScale.$.label.style.textAlign = "left";  
            }

            if (this.$.textYAxisActive) {
                this.$.textYAxisActive.$.label.style.textAlign = "left";
            }

            if (this.$.textTurnYAxis) {
                this.$.textTurnYAxis.$.label.style.textAlign = "left";
            }

            if (this.$.textUnitPosition) {
                this.$.textUnitPosition.$.label.style.textAlign = "left";
            }

            if (this.$.enumUnitPosition) {
                this.$.enumUnitPosition.context = this.context;   
                this.$.enumUnitPosition.valueoptions = this.unitPositionValues_lang;

                if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
                    if (!DataRepository.isDataLoaded()
                    || DataRepository.getSelectedChannel() == '') {
                        this.$.enumUnitPosition.state = 2; //not active
                        this.$.enumUnitPosition.style.opacity = "0.5";
                    }
                } else {
                    this.$.enumUnitPosition.state = 2; //not active
                    this.$.enumUnitPosition.style.opacity = "0.5";
                }
            }

            if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
                if (this.$.enumUnitPosition) {
                    this.$.enumUnitPosition.addEventListener('sig-control-enum-value-changed', this.onUnitPositionChangedHandler);
                }

                // if (this.$.cbYAxisActive) {
                //     this.$.cbYAxisActive.addEventListener('sig-control-checkbox-value-changed', this.onYAxisActiveChangedHandler);
                // }

                if (this.$.cbYAxisPosition) {
                    this.$.cbYAxisPosition.addEventListener('sig-control-checkbox-value-changed', this.onYAxisPositionChangedHandler);
                }
            }
        }

        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            window.sigApi.eventMediator.subscribe(window.sigApi.events.getInternalEvent('LANGUAGE_CHG'), () => {
                this._switchLang();
            });
            this._switchLang();
        }
    }

    connectedCallback() {
        super.connectedCallback();
        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            this.sigAddEventListener('scaleSettings_Changed', e => {
                this._channelHideListener(e)
            }, 'jsEvent', window);

            this.sigAddEventListener('scaleSettingsValue_Changed', e => {
                this._scaleSettingsChangedListener(e)
            }, 'jsEvent', window);

            // this.sigAddEventListener('evNoSpace_setYAxisInactive', e => {
            //     this._setYAxisInactive(e)    
            // }, 'jsEvent', window);
        }
    }

    disconnectedCallback() {
        super.disconnectedCallback();
        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {            
            if (!this.compositeActive) {
                // if (this.$.cbYAxisActive) this.$.cbYAxisActive.removeEventListener('sig-control-checkbox-value-changed', this.onYAxisActiveChangedHandler);
                if (this.$.cbYAxisPosition) this.$.cbYAxisPosition.removeEventListener('sig-control-checkbox-value-changed', this.onYAxisPositionChangedHandler);
                if (this.$.enumUnitPosition) this.$.enumUnitPosition.removeEventListener('sig-control-enum-value-changed', this.onUnitPositionChangedHandler);
            } else { //if composite control is active           
                // if (this.cbYAxisActive) this.cbYAxisActive.removeEventListener('sig-control-checkbox-value-changed', this.onYAxisActiveChangedHandler);
                if (this.cbYAxisPosition) this.cbYAxisPosition.removeEventListener('sig-control-checkbox-value-changed', this.onYAxisPositionChangedHandler);
                if (this.enumUnitPosition) this.enumUnitPosition.removeEventListener('sig-control-enum-value-changed', this.onUnitPositionChangedHandler);
            }  
        }
    }

    _switchLang() {
        //object to get the text; if textname does not exist - default value is used
        let requestObj = {[this.textlistname] : { 
            [this.textlistprefix + "caption"] : "SCALESETTINGS",
            [this.textlistprefix + "labelScale"] : "Scale",
            [this.textlistprefix + "labelYAxisActive"] : "Y-Axis active",
            [this.textlistprefix + "labelTurnYAxis"] : "Turn Y-Axis position",
            [this.textlistprefix + "labelUnitPosition"] : "Unit position",
            [this.textlistprefix + "unitPosition_one"] : "Top",
            [this.textlistprefix + "unitPosition_two"] : "Bottom",
            [this.textlistprefix + "unitPosition_three"] : "Hide",
            }};

        //get the language code
        let lang_num = this.tmApi.getCurrentLanguage().getIndex();

        //get all the texts
        this.tmApi.getTexts(requestObj, lang_num);

        //new enum values
        this.unitPositionValues_lang[0] = {id: 0, name: requestObj[this.textlistname][this.textlistprefix + "unitPosition_one"]};
        this.unitPositionValues_lang[1] = {id: 1, name: requestObj[this.textlistname][this.textlistprefix + "unitPosition_two"]};
        this.unitPositionValues_lang[2] = {id: 2, name: requestObj[this.textlistname][this.textlistprefix + "unitPosition_three"]};

        //composite control
        if (this.compositeActive) {
            //set new texts
            this.caption = requestObj[this.textlistname][this.textlistprefix + "caption"];

            //remove and set array for the enum again
            if (this.enumUnitPosition) {
                this.enumUnitPosition.valueoptions = [];
                this.enumUnitPosition.valueoptions = this.unitPositionValues_lang;
            }
        } else {
            //set new texts
            this.caption = requestObj[this.textlistname][this.textlistprefix + "caption"];
            this.labelScale = requestObj[this.textlistname][this.textlistprefix + "labelScale"];
            // this.labelYAxisActive = requestObj[this.textlistname][this.textlistprefix + "labelYAxisActive"];
            this.labelTurnYAxis = requestObj[this.textlistname][this.textlistprefix + "labelTurnYAxis"];
            this.labelUnitPosition = requestObj[this.textlistname][this.textlistprefix + "labelTurnYAxis"];

            //remove and set array for the enum again
            this.$.enumUnitPosition.valueoptions = [];
            this.$.enumUnitPosition.valueoptions = this.unitPositionValues_lang;
        }
    }

    _handleComposite() {
        this._initVars();
    }

    _initVars() {
        //if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
        this.compositeControl = this.querySelector('sig-composite-control');

        if (this.compositeControl) //if composite control is attached
        {
            this.compositeActive = true;
            this.$.grid.style.display = "none";
        } else {
            this.compositeActive = false;
            this.$.grid.style.display = "grid";
        }

        window.sigApi.vm.addRenderCallback(this, () => {
            this._rendered();
        });
    }

    _rendered() {
        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            this._isRendered = true;
        }
    }
    
    _hidetitlechanged(oldval, newval) {
        if (oldval) {
            this.$.content.style.setProperty('height', 'calc(100% - 2 * var(--theme-sig-control-da-scalesettings-border-width, 1px))');
            if (getComputedStyle(this.$.content).getPropertyValue('border-width') != '0px') this.$.content.style.setProperty('border-top-style', 'var(--theme-sig-control-da-scalesettings-border-style, solid)');
        } else {
            this.$.content.style.setProperty('height', 'calc(100% - var(--theme-sig-control-da-titlebar-height, 26px) - var(--theme-sig-control-da-scalesettings-border-width, 1px))');
            this.$.content.style.setProperty('border-top-style', 'none');
        }
    }

    _hideaxisactivechanged(oldval, newval) {
        if (newval) {
            // this.$.cbYAxisActive.state = 1;
            this.$.textYAxisActive.state = 1;
        } else {
            // this.$.cbYAxisActive.state = 3;
            this.$.textYAxisActive.state = 3;
        }
    }

    _hideturnpositionchanged(oldval, newval) {
        if (newval) {
            // this.$.cbYAxisPosition.state = 1;
            this.$.textTurnYAxis.state = 1;
        } else {
            // this.$.cbYAxisPosition.state = 3;
            this.$.textTurnYAxis.state = 3;
        }
    }

    // _setYAxisInactive(e){
    //     if (this._isRendered) {
    //         if (this.compositeActive) {
    //             if (this.cbYAxisActive) {
    //                 if (e.detail.scaleSettings.yAxisActive) this.cbYAxisActive.value = 1;
    //                 else this.cbYAxisActive.value = 0;
    //             }
    //         } else {
    //             if (e.detail.scaleSettings.yAxisActive) this.$.cbYAxisActive.value = 1;
    //             else this.$.cbYAxisActive.value = 0;
    //         }  
    //     }    
    // }

    // onYAxisActiveChanged(eventData) {
    //     if (this._isRendered) {
    //         let data;
    //         DataRepository.setyAxisPropertieChanged(true);
    //         DataRepository.setxAxisPropertieChanged(true);
    //         DataRepository.setGridChanged(true);
    //         if (this.compositeActive) { //if composite control is attached
    //             if (this.cbYAxisActive) {
    //                 data = this.cbYAxisActive.value;
    //             }
    //         } else {
    //             data = this.$.cbYAxisActive.value;
    //         }
    
    //         if (data != undefined) {
    //             dispatchEvent(new CustomEvent("yAxisActive_Changed", {
    //                 'detail': {
    //                     yaxisactive: data
    //                 }
    //             }));
    //         }
    //     }
    // }

    onYAxisPositionChanged(eventData) {
        if (this._isRendered) {
            let data;
        
            if (this.compositeActive) { //if composite control is attached
                if (this.cbYAxisPosition) {
                    data = this.cbYAxisPosition.value;
                }
            } else {
                data = this.$.cbYAxisPosition.value;
            }
    
            if (data != undefined) {
                dispatchEvent(new CustomEvent("yAxisPosition_Changed", {
                    'detail': {
                        yaxisposition: data
                    }
                }));
            }
        }
    }

    onUnitPositionChanged(eventData) {
        if (this._isRendered) {
            let unitPosition;

            if (!this.compositeActive) unitPosition = this.unitPositionValues.find(o => o.id == parseInt(this.$.enumUnitPosition.value)).name;
            else {
                if (this.enumUnitPosition) unitPosition = this.unitPositionValues.find(o => o.id == parseInt(this.enumUnitPosition.value)).name;    
            }            
    
            if (unitPosition != undefined) {
                dispatchEvent(new CustomEvent("unitPosition_Changed", {
                    'detail': {
                        unitposition: unitPosition //dispatch the name which belongs to value (for easier readability in kurvendiagramm)
                    }
                }));
            }
        }
    }

    _channelHideListener(e) {
        if (e.detail.custom_info) {
            this.$.container.style.display = 'none';
        } else {
            this.$.container.style.display = 'inline';
        }
    }

    _scaleSettingsChangedListener(e) {
        //if (this._isRendered) {
            if (!this.compositeActive) {
                // if (this.$.cbYAxisActive.disabled) {
                //     this.$.cbYAxisActive.disabled = false;
                // }
    
                if (this.$.cbYAxisPosition.disabled) {
                    this.$.cbYAxisPosition.disabled = false;
                }
    
                if (this.$.enumUnitPosition.state == 2) {
                    this.$.enumUnitPosition.state = 1;
                    this.$.enumUnitPosition.style.opacity = "1";
                }
    
                // if (e.detail.scaleSettings.yAxisActive) this.$.cbYAxisActive.value = 1;
                // else this.$.cbYAxisActive.value = 0;
    
                this.$.cbYAxisPosition.value = e.detail.scaleSettings.turnYAxis;
                this.yAxisPositionEval(e.detail.scaleSettings.yAxisUnitPosition);
            } else {
                // if (this.cbYAxisActive && this.cbYAxisActive.disabled) {
                //     this.cbYAxisActive.disabled = false;
                // }
    
                if (this.cbYAxisPosition && this.cbYAxisPosition.disabled) {
                    this.cbYAxisPosition.disabled = false;
                }
    
                if (this.enumUnitPosition && this.enumUnitPosition.state == 2) {
                    this.enumUnitPosition.state = 1;
                    this.enumUnitPosition.style.opacity = "1";
                }
    
                // if (this.cbYAxisActive) {
                //     if (e.detail.scaleSettings.yAxisActive) this.cbYAxisActive.value = 1;
                //     else this.cbYAxisActive.value = 0;
                // }
    
                if (this.cbYAxisPosition) this.cbYAxisPosition.value = e.detail.scaleSettings.turnYAxis;
                this.yAxisPositionEval(e.detail.scaleSettings.yAxisUnitPosition);
            }
        //}       
    }

    //apply enum value
    yAxisPositionEval(pos) {
        let selNum;

        if (pos.toString().includes('top')) selNum = 0;
        else if (pos.toString().includes('bottom')) selNum = 1;
        else selNum = 2;

        if (!this.compositeActive) this.$.enumUnitPosition.value = selNum;
        else {
            if (this.enumUnitPosition) {
                this.enumUnitPosition.value = selNum;
            } 
        } 
    }
}
window.customElements.define(LasalRuntimeSigDaScaleSettings.is, LasalRuntimeSigDaScaleSettings);
