import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
import '../sig-control-button/sig-control-button.js';
import '../sig-control-checkbox/sig-control-checkbox.js';
import '../sig-control-enum/sig-control-enum.js';
import '../sig-control-input/sig-control-input.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 LasalRuntimeSigDaGeneralSettings extends LasalRuntimeSigElement {

    /****************************************************************************************************
     * When the element is loaded, importMeta() assigns reference to the path from 
     * which an element was imported to its importPath property. 
     * Relative URLs in styles are automatically re-written to be relative to the importPath property. 
     * You can use [[importPath]] in your component to load url resources
     * 
     * @readonly
     * @static
     ****************************************************************************************************/
    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-generalsettings {
                width: 100%;
                height: 100%;
                position: relative
            }
            
            #title {
                height: auto;
                flex: 0 auto;
            }

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

            #container {
                display: inline;
            }

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

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

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

            #buttonBox {
                padding: 1px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :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);
                --theme-sig-control-titlebar-border-width: var(--theme-sig-control-da-titlebar-border-width);
                --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);
                /*text-align*/
                
                --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-button {
                --theme-sig-control-button-color: var(--theme-sig-control-da-button-color);
                --theme-sig-control-button-background-color: var(--theme-sig-control-da-button-background-color);
                --theme-sig-control-button-pressed-color: var(--theme-sig-control-da-button-pressed-color);
                --theme-sig-control-button-pressed-background-color: var(--theme-sig-control-da-button-pressed-background-color);
                --theme-sig-control-button-border-color: var(--theme-sig-control-da-button-border-color);
                --theme-sig-control-button-border-width: var(--theme-sig-control-da-button-border-width, 1px);
                --theme-sig-control-button-border-radius: var(--theme-sig-control-da-button-border-radius, 0px);
                --theme-sig-control-button-border-style: var(--theme-sig-control-da-button-border-style, solid);
                width: var(--theme-sig-control-da-button-width, 140px);
                height: var(--theme-sig-control-da-button-height, 30px);
                top: 0;
                left: 0;
                position: relative;
            }

            :host sig-control-input {
                width: 130px;
                height: var(--theme-sig-control-da-input-height, 30px);
                --theme-sig-control-input-value-text-align: var(--theme-sig-control-da-input-text-align, center);
                --theme-sig-control-input-color: var(--theme-sig-control-da-input-color);
                --theme-sig-control-input-background-color: var(--theme-sig-control-da-input-background-color);
                --theme-sig-control-input-value-active-background-color: var(--theme-sig-control-da-input-active-background-color);
                --theme-sig-control-input-value-active-color: var(--theme-sig-control-da-input-active-color);
                --theme-sig-control-input-border-color: var(--theme-sig-control-da-input-border-color);
                --theme-sig-control-input-border-width: var(--theme-sig-control-da-input-border-width, 1px);
                --theme-sig-control-input-border-style: var(--theme-sig-control-da-input-border-style, solid);
                --theme-sig-control-input-border-radius: var(--theme-sig-control-da-input-border-radius, 0px);
                --theme-sig-control-input-shadow-size: var(--theme-sig-control-da-input-border-shadow-size, 0px);
                --theme-sig-control-input-shadow-color: var(--theme-sig-control-da-input-border-shadow-color);
                top: 0;
                left: 0;
                position: relative;
            }

            :host sig-control-text {
                --theme-sig-control-text-color: var(--theme-sig-control-da-generalsettings-text-color);
                top: 0px;
                left: 0px;
                position: relative;
                width: auto;
                height: auto;
            }

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

                --theme-sig-element-top: 0px;
                --theme-sig-element-left: 0px;
                --theme-sig-element-height: 30px; 
                
                --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;
            }

            .shortEnum {
                --theme-sig-element-width: 110px; 
            }

            .longEnum {
                --theme-sig-element-width: 130px; 
            }
            
        </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="settingsContent">
                    <div id="settingsBox">
                        <sig-control-text id="textDirection" 
                                          sigtext="[[labelDirection]]"></sig-control-text>
                    </div>
                    <div id="settingsBox">
                        <sig-control-enum class="longEnum" 
                                          id="enumDirection"></sig-control-enum>
                        <!-- <sig-control-button id="btnDirection" 
                                                 sigbtntext="{{directionText}}" 
                                                 sigbtntextpressed="{{directionText}}"></sig-control-button> -->
                    </div>
                    <div id="settingsBox"></div>
                    <div id="settingsBox">
                        <sig-control-text id="textXScale" 
                                          sigtext="[[labelXScale]]"></sig-control-text>
                    </div>
                    <div id="settingsBox">
                        <sig-control-input id="inputScaleX" 
                                           type="numeric" 
                                           shadowactive="[[inputshadowactive]]" 
                                           limit-low="{{limitLow}}" 
                                           limit-high="{{limitHigh}}" 
                                           value={{xScaleValue}}></sig-control-input>
                    </div>
                    <div id="settingsBox">
                        <sig-control-enum class="shortEnum" 
                                          id="enumUnits"></sig-control-enum>
                        <!-- <sig-control-text id="textSeconds" sigtext="[[labelSeconds]]"></sig-control-text> -->
                    </div>

                    <div id="settingsBox">
                        <sig-control-text class="longText" id=textTimetype 
                                          sigtext="[[textTimetype]]"></sig-control-text>
                    </div>
                    <div id="settingsBox">
                        <sig-control-enum class="longEnum" 
                                          id="enumTimeType"></sig-control-enum>
                        <!-- <sig-control-button id="btnDirection" sigbtntext="{{directionText}}" sigbtntextpressed="{{directionText}}"></sig-control-button> -->
                    </div>
                    <div id="settingsBox"></div>

                    <div id="settingsBox">
                        <sig-control-text  class="longText" id=textTimeFormat 
                                          sigtext="[[textTimeFormat]]"></sig-control-text>
                    </div>
                    <div id="settingsBox">
                        <sig-control-enum class="longEnum" 
                                          id="enumTimeFormat"></sig-control-enum>
                        <!-- <sig-control-button id="btnDirection" sigbtntext="{{directionText}}" sigbtntextpressed="{{directionText}}"></sig-control-button> -->
                    </div>
                </div>
                <div id="buttonContent">
                    <div id="buttonBox">
                        <sig-control-button id="btnPauseResume" 
                                            sigbtntext="[[pauseResumeText]]" 
                                            sigbtntextpressed="[[pauseResumeText]]"></sig-control-button>
                    </div>
                    <div id="buttonBox">
                        <sig-control-button id="btnClearData" 
                                            sigbtntext="[[clearDataText]]" 
                                            sigbtntextpressed="[[clearDataText]]"></sig-control-button>
                    </div>
                </div>
            </div>
        </div>`;
  }


        
    static get is() {
        return 'sig-control-da-generalsettings';
    }
    static get properties() {
        return {
            xScaleValue: {
                type: Number,
                value: 1,
                observer: '_scaleXchanged'
            },
            limitLow: {
                type: Number,
                value: 0.01
            },
            limitHigh: {
                type: Number,
                value: 5000000
            },
            pauseResumeText: {
                type: String,
                value: 'Pause'
            },
            pauseText: {
                type: String,
                value: 'Pause'
            },
            resumeText: {
                type: String,
                value: 'Resume'
            },
            caption: {
                type: String,
                value: 'GENERAL SETTINGS'
            },
            labelDirection: {
                type: String,
                value: 'Direction:'
            },
            labelXScale: {
                type: String,
                value: 'X-Scale:'
            },
            labelSeconds: {
                type: String,
                value: 'seconds'
            },
            clearDataText: {
                type: String,
                value: 'Clear data'
            },
            compositeActive: {
                type: Boolean,
                value: false
            },
            hidetitle: {
                type: Boolean,
                value: false,
                reflectToAttribute: true,
                observer: '_hidetitlechanged'
            },
            hidedirection: {
                type: Boolean,
                observer: '_hidedirectionchanged'
            },
            hidescale: {
                type: Boolean,
                observer: '_hidescalechanged'
            },
            hidestop: {
                type: Boolean,
                observer: '_hidestopchanged'
            },
            hidecleardata: {
                type: Boolean,
                observer: '_hidecleardatachanged'
            },
            shadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            applybordereffect: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
            },
            inputshadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            textlistname: {
                type: String,
                value: "DataAnalyzer"
            },
            textlistprefix: {
                type: String,
                value: "GeneralSettings_"
            },
            xAxisTypeValues: 
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "Unit"
                            }, 
                            {
                                "id": 1,
                                "name": "Date Time"
                            },
                            {
                                "id": 2,
                                "name": "Date"
                            },
                            {
                                "id": 3,
                                "name": "Time"
                            }
                       
                        ]
                }
            },

            xAxisFormatValuesDateTime: 
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "dd.mm.yy HH:MM"
                            }, {
                                "id": 1,
                                "name": "dd.mm HH:MM"
                            }]
                }
            },
            xAxisFormatValuesDate: 
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "dd.mm.yy"
                            }, {
                                "id": 1,
                                "name": "dd.mm"
                            }]
                }
            },
            xAxisFormatValuesTime: 
            {
                type: Array,
                value: () => { return [{
                                "id": 0,
                                "name": "HH:MM:ss"
                            }, {
                                "id": 1,
                                "name": "HH:MM"
                            }]
                }
            },
            textTimetype:
            {
                type: String,
                value : "Time Type:"
            },
            textTimeFormat: 
            {
                type: String,
                value: "Time Format:"
            }
        };
    }

    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;
            this.wndApi = window.sigApi.windowManager;
        } else {
            this._log('API not ready!', 'ERROR');
        }

        this.init = true;
        this.gotValues = false;
        this.statePauseResume = true; //values for determining state (pause/resume button)
    }

    ready() {
        super.ready();

        this._handleComposite(); //initialize composite control

        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) { //not possible in design mode, VISU designer is not prepared for that        
            this.onScaleXChangedHandler = (e) => { this.onScaleXChanged(e) };
            this.onClearDataHandler = (e) => { this.onClearData(e) };
            this.onPauseResumeHandler = () => { this.onPauseResume() };
            this.onRightToLeftChangedHandler = (e) => { this.onRightToLeftChanged(e) };
            this.onUnitsChangedHandler = (e) => { this.onUnitsChanged(e) };
            this.enumTimeTypeHandler = (e) => { this._onTimeTypeChanged(e) };
            this.enumTimeFormatHandler = (e) => { this._onTimeFormatChanged(e) };

            this.unitValues = [{
                    "id": 0,
                    "name": DataRepository.getValDivEnum().dayperdiv.description
                }, {
                    "id": 1,
                    "name": DataRepository.getValDivEnum().hourperdiv.description
                }, {
                    "id": 2,
                    "name": DataRepository.getValDivEnum().minuteperdiv.description
                }, {
                    "id": 3,
                    "name": DataRepository.getValDivEnum().secondperdiv.description
                }, {
                    "id": 4,
                    "name": DataRepository.getValDivEnum().msperdiv.description
                }, {
                    "id": 5,
                    "name": DataRepository.getValDivEnum().microsecperdiv.description
                }
            ];

            this.directionValues = [{
                    "id": 0,
                    "name": DataRepository.getRTLEnum().lefttoright.description
                }, {
                    "id": 1,
                    "name": DataRepository.getRTLEnum().righttoleft.description
                }
            ];           
        }

        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) {              
                if (ccVm.getChildByName('enumDirection')) {
                    this.enumDirection = ccVm.getChildByName('enumDirection').getDomRef();
                }

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

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

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

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

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

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

                if (this.enumUnits) {
                    this.enumUnits.context = this.context;   
                    this.enumUnits.valueoptions = this.unitValues;
                    this.enumUnits.value = 3;
                }

                if (this.enumDirection) {
                    this.enumDirection.context = this.context;
                    this.enumDirection.valueoptions = this.directionValues;
                    this.enumDirection.value = 0;   
                }

                if (this.inputScaleX) {
                    this.inputScaleX.type = "numeric";
                    this.inputScaleX.checkLimits = this.checkLimits; //set boundary function for check limits
                    this.inputScaleX.limitLow = this.limitLow;
                    this.inputScaleX.limitHigh = this.limitHigh;
                    this.inputScaleX.value = this.xScaleValue;
                }

                if (this.btnPauseResume) {
                    this.btnPauseResume.sigbtntext = this.pauseResumeText;
                    this.btnPauseResume.sigbtntextpressed = this.pauseResumeText;
                }

                if (this.btnClearData) {
                    this.btnClearData.sigbtntext = this.clearDataText;
                    this.btnClearData.sigbtntextpressed = this.clearDataText;
                }

                if (this.inputScaleX) {
                    this.inputScaleX.addEventListener('sig-control-input-value-changed', this.onScaleXChangedHandler);
                }

                if (this.btnClearData) {
                    this.btnClearData.addEventListener('sig-control-button-mousedown', this.onClearDataHandler);
                }

                if (this.btnPauseResume) {
                    this.btnPauseResume.addEventListener('sig-control-button-mousedown', this.onPauseResumeHandler);
                }

                if (this.enumDirection) {
                    this.enumDirection.addEventListener('sig-control-enum-value-changed', this.onRightToLeftChangedHandler);
                }

                if (this.enumUnits) {
                    this.enumUnits.addEventListener('sig-control-enum-value-changed',this.onUnitsChangedHandler);
                }

                if (this.enumTimeType) {
                    this.enumTimeType.context = this.context;
                    this.enumTimeType.valueoptions = this.xAxisTypeValues;
                    this.enumTimeType.value = 0;

                    this.enumTimeType.addEventListener('sig-control-enum-value-changed', this.enumTimeTypeHandler);
                }

                if (this.enumTimeFormat) {
                    this.enumTimeFormat.context = this.context;
                    this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                    this.enumTimeFormat.value = 0;

                    this.enumTimeFormat.addEventListener('sig-control-enum-value-changed', this.enumTimeFormatHandler);
                }
            }
        }
        else
        {
            if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
                //set style for labels (sig-control-text components) in code - for some reason it doesn't apply when it's done in css
                if (this.$.textDirection) {
                    this.$.textDirection.$.label.style.textAlign = "left";
                }

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

                if (this.$.enumUnits) {
                    this.$.enumUnits.context = this.context;   
                    this.$.enumUnits.valueoptions = this.unitValues;
                    this.$.enumUnits.value = 3;
                }

                if (this.$.enumDirection)
                {
                    this.$.enumDirection.context = this.context;
                    this.$.enumDirection.valueoptions = this.directionValues;
                    //this.$.enumDirection.value = 0;                  
                }

                if (this.$.enumTimeType)
                {
                    this.$.enumTimeType.context = this.context;
                    this.$.enumTimeType.valueoptions = this.xAxisTypeValues;
                    //this.$.enumTimeType.value = 0;         

                    this.$.enumTimeType.addEventListener('sig-control-enum-value-changed', this.enumTimeTypeHandler);
                }
    
                if (this.$.enumTimeFormat)
                {
                    this.$.enumTimeFormat.context = this.context;
                    this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                    //this.$.enumTimeFormat.value = 0;    
                    
                    this.$.enumTimeFormat.addEventListener('sig-control-enum-value-changed', this.enumTimeFormatHandler);
                }

                if (this.$.inputScaleX) {
                    this.$.inputScaleX.checkLimits = this.checkLimits; //set boundary function for check limits
                }

                //add event listeners to buttons/checkboxes
                if (this.$.btnClearData) {
                    this.$.btnClearData.addEventListener('sig-control-button-mousedown', this.onClearDataHandler);
                }

                if (this.$.btnPauseResume) {
                    this.$.btnPauseResume.addEventListener('sig-control-button-mousedown', this.onPauseResumeHandler);
                }

                if (this.$.enumDirection) {
                    this.$.enumDirection.addEventListener('sig-control-enum-value-changed', this.onRightToLeftChangedHandler);
                }

                if (this.$.enumUnits) {
                    this.$.enumUnits.addEventListener('sig-control-enum-value-changed', this.onUnitsChangedHandler);
                }
            }
        }

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

    connectedCallback() {
        super.connectedCallback();

        //add event listeners to custom events
        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            let myElem = this;

            this.sigAddEventListener('gridXScale_Changed', e => {
                this._xScaleChanged(e)
              }, 'jsEvent', window);
             
            this.sigAddEventListener('gridXScaleUnit_Changed', e => {
                this._xScaleUnitChanged(e)
              }, 'jsEvent', window);

            this.sigAddEventListener('gridDirection_Changed', e => {
                this._directionChanged(e)
              }, 'jsEvent', window);

            this.sigAddEventListener('StartStopButtonExtern_Changed', e => {
                this._startStopButtonExternChanged(e)
              }, 'jsEvent', window);

            this.sigAddEventListener('timeFormat_ChangedDP', e => {
                this._timeFormatChangedDP(e)
            }, 'jsEvent', window);

            this.sigAddEventListener('ZoomStop', e => {
                this._zoomStop(e)
            }, 'jsEvent', window);

            this.sigAddEventListener('evRspPauseResumeAcknowledge', e => {
                this._pauseResumeAcknowledge(e)
            }, 'jsEvent', window);

            this.sigAddEventListener('evRspClearDataAcknowledge', e => {
                this._clearDataAcknowledge(e)
            }, 'jsEvent', window);
        }
    }

    disconnectedCallback() {
        super.disconnectedCallback();

        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            if (!this.compositeActive)
            {
                //remove event listeners from buttons/checkboxes
                if (this.$.enumDirection) {
                    this.$.enumDirection.removeEventListener('sig-control-enum-value-changed', this.onRightToLeftChangedHandler);
                }

                if (this.$.enumUnits) {
                    this.$.enumUnits.removeEventListener('sig-control-enum-value-changed', this.onUnitsChangedHandler);
                }                   

                if (this.$.btnClearData) {
                    this.$.btnClearData.removeEventListener('sig-control-button-mousedown', this.onClearDataHandler);
                }

                if (this.$.btnPauseResume) {
                    this.$.btnPauseResume.removeEventListener('sig-control-button-mousedown', this.onPauseResumeHandler);
                }
                            
                if (this.$.enumUnits) {
                    this.$.enumUnits.removeEventListener('sig-control-enum-value-changed', this.enumTimeFormatHandler);
                }

                if (this.$.enumTimeType) {
                    this.$.enumTimeType.removeEventListener('sig-control-enum-value-changed', this.enumTimeTypeHandler);
                }
            }
            else {
                //remove event listeners from buttons/checkboxes
                if (this.enumDirection) {
                    this.enumDirection.removeEventListener('sig-control-enum-value-changed', this.onRightToLeftChangedHandler);
                }

                if (this.enumUnits) {
                    this.enumUnits.removeEventListener('sig-control-enum-value-changed', this.onUnitsChangedHandler);
                }

                if (this.enumTimeType) {
                    this.enumTimeType.removeEventListener('sig-control-enum-value-changed', this.enumTimeTypeHandler);
                }

                if (this.enumTimeFormat) {
                    this.enumTimeFormat.removeEventListener('sig-control-enum-value-changed', this.enumTimeFormatHandler);
                }

                if (this.btnClearData) {
                    this.btnClearData.removeEventListener('sig-control-button-mousedown', this.onClearDataHandler);
                }

                if (this.btnPauseResume) {
                    this.btnPauseResume.removeEventListener('sig-control-button-mousedown', this.onPauseResumeHandler);
                }                       

                if (this.inputScaleX) {
                    this.inputScaleX.removeEventListener('sig-control-input-value-changed', this.onScaleXChangedHandler);
                }
            }
        }
    }

    _switchLang() {
        //object to get the text; if textname does not exist - default value is used
        let requestObj = {[this.textlistname] : { 
            [this.textlistprefix + "caption"] : "GENERAL SETTINGS",
            [this.textlistprefix + "labelDirection"] : "Direction:",
            [this.textlistprefix + "labelXScale"] : "X-Scale:",
            [this.textlistprefix + "pauseText"] : "Pause",
            [this.textlistprefix + "clearDataText"] : "Clear Data",
            [this.textlistprefix + "resumeText"] : "Resume",
            [this.textlistprefix + "enumDirection_one"] : "Left to Right",
            [this.textlistprefix + "enumDirection_two"] : "Right to Left",
            [this.textlistprefix + "textTimeType"] : "Time Type:",
            [this.textlistprefix + "textTimeFormat"] : "Time Format:",
            [this.textlistprefix + "enumTimeType_unit"] : "Unit",
            [this.textlistprefix + "enumTimeType_dateTime"] : "Date Time",
            [this.textlistprefix + "enumTimeType_date"] : "Date",
            [this.textlistprefix + "enumTimeType_time"] : "Time",
            [this.textlistprefix + "pauseAcknErrorText"] : "Pausing was not successful!",
            [this.textlistprefix + "pauseAcknErrorTop"] : "Pausing not successful",
            [this.textlistprefix + "resumeAcknErrorText"] : "Resuming was not successful!",
            [this.textlistprefix + "resumeAcknErrorTop"] : "Resuming not successful",
            [this.textlistprefix + "clearDataAcknErrorText"] : "Clearing data was not successful!",
            [this.textlistprefix + "clearDataAcknErrorTop"] : "Clearing data not successful",
            [this.textlistprefix + "scaleXErrorText"] : "X-Scale value is too small!",
            [this.textlistprefix + "scaleXErrorTop"] : "X-Scale value too small"
        }};

        //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.directionValues[0] = {id: 0, name: requestObj[this.textlistname][this.textlistprefix + "enumDirection_one"]};
        this.directionValues[1] = {id: 1, name: requestObj[this.textlistname][this.textlistprefix + "enumDirection_two"]};
        this.xAxisTypeValues[0] = {id: 0, name: requestObj[this.textlistname][this.textlistprefix + "enumTimeType_unit"]};
        this.xAxisTypeValues[1] = {id: 1, name: requestObj[this.textlistname][this.textlistprefix + "enumTimeType_dateTime"]};
        this.xAxisTypeValues[2] = {id: 2, name: requestObj[this.textlistname][this.textlistprefix + "enumTimeType_date"]};
        this.xAxisTypeValues[3] = {id: 3, name: requestObj[this.textlistname][this.textlistprefix + "enumTimeType_time"]};

        //composite control
        if (this.compositeActive) {
            //remove and set array for the enum again
            if (this.enumDirection) {
                this.enumDirection.valueoptions = [];
                this.enumDirection.valueoptions = this.directionValues;
            }

            if (this.enumTimeType) {
                this.enumTimeType.valueoptions = [];
                this.enumTimeType.valueoptions = this.xAxisTypeValues;
            }

            //text of button according to the state
            if (this.statePauseResume) {
                this.pauseResumeText = this.resumeText;
            } else {
                this.pauseResumeText = this.pauseText;
            }
        } else {
            //set new texts
            this.labelDirection = requestObj[this.textlistname][this.textlistprefix + "labelDirection"];
            this.labelXScale = requestObj[this.textlistname][this.textlistprefix + "labelXScale"];
            this.pauseText = requestObj[this.textlistname][this.textlistprefix + "pauseText"];
            this.clearDataText = requestObj[this.textlistname][this.textlistprefix + "clearDataText"];
            this.resumeText = requestObj[this.textlistname][this.textlistprefix + "resumeText"];
            this.caption = requestObj[this.textlistname][this.textlistprefix + "caption"];
            this.textTimetype = requestObj[this.textlistname][this.textlistprefix +"textTimeType"];
            this.textTimeFormat = requestObj[this.textlistname][this.textlistprefix +"textTimeFormat"];
            
            //remove and set array for the enum again
            this.$.enumDirection.valueoptions = [];
            this.$.enumDirection.valueoptions = this.directionValues;

            this.$.enumTimeType.valueoptions = [];
            this.$.enumTimeType.valueoptions = this.xAxisTypeValues;

            //text of button according to the state
            if (this.statePauseResume) {
                this.pauseResumeText = this.pauseText;
            } else {
                this.pauseResumeText = this.resumeText;
            }
        }
    }

    _handleComposite() { 
        this._initVars();
    }

    _initVars() {
        this.compositeControl = this.querySelector('sig-composite-control');

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

        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            window.sigApi.vm.addRenderCallback(this, () => {
                this._rendered();
            });
        }
    }

    _rendered() {
        if (!this.isdesignmode && !this.smApi.isInOfflinePreview()) {
            //if data already loaded (working on every screen)
            if (DataRepository.isDataLoaded()) {
                if (this.compositeActive) {
                    if (DataRepository.getGeneralSettings().rightToLeft == DataRepository.getRTLEnum().lefttoright) {
                        if (this.enumDirection) this.enumDirection.value = 0;
                    } else {
                        if (this.enumDirection) this.enumDirection.value = 1;
                    }

                    if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().dayperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 0;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().hourperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 1;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().minuteperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 2;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().secondperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 3;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().msperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 4;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().microsecperdiv.description) {
                        if (this.enumUnits) this.enumUnits.value = 5;
                    }

                    if (this.inputScaleX) this.inputScaleX.value = this._enumHelper(DataRepository.getGeneralSettings().xScale, this.enumUnits.value);

                    let actTimeType = DataRepository.getGeneralSettings().timeType;

                    if (this.enumTimeFormat) {
                        this.enumTimeType.value = actTimeType;
                        if (actTimeType == 1) {
                            this.enumTimeFormat.state = 1;
                            this.enumTimeFormat.style.opacity = "1";  
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;																	  
                        } else if (actTimeType == 2) {
                            this.enumTimeFormat.state = 1;
                            this.enumTimeFormat.style.opacity = "1";  
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;																 
                        } else if (actTimeType == 3) {
                            this.enumTimeFormat.state = 1;
                            this.enumTimeFormat.style.opacity = "1";  
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesTime;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;															 
                        } else {
                            this.enumTimeFormat.state = 2;
                            this.enumTimeFormat.style.opacity = "0.5";      
                        }
                    }

/*                     if (timeType == 1) {
                        this.enumTimeFormat.valueoptions = [];
                        this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                        this.enumTimeFormat.value = 0;
                    } else if (timeType == 2) {
                        this.enumTimeFormat.valueoptions = [];
                        this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                        this.enumTimeFormat.value = 0;
                    }  */

                    if (DataRepository.getStatePauseResume()) {
                        this.statePauseResume = true;
                        if (this.btnPauseResume) this.btnPauseResume.sigbtntext = this.btnPauseResume.sigbtntextpressed = this.pauseResumeText = this.pauseText;
                    } else {
                        this.statePauseResume = false;
                        if (this.btnPauseResume) this.btnPauseResume.sigbtntext = this.btnPauseResume.sigbtntextpressed = this.pauseResumeText = this.resumeText;
                    }
                } else {
                    if (DataRepository.getGeneralSettings().rightToLeft == DataRepository.getRTLEnum().lefttoright) {
                        this.$.enumDirection.value = 0;
                    } else {
                        this.$.enumDirection.value = 1;
                    }

                    if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().dayperdiv.description) {
                        this.$.enumUnits.value = 0;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().hourperdiv.description) {
                        this.$.enumUnits.value = 1;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().minuteperdiv.description) {
                        this.$.enumUnits.value = 2;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().secondperdiv.description) {
                        this.$.enumUnits.value = 3;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().msperdiv.description) {
                        this.$.enumUnits.value = 4;
                    } else if (DataRepository.getGeneralSettings().xUnits == DataRepository.getValDivEnum().microsecperdiv.description) {
                        this.$.enumUnits.value = 5;
                    }

                    
                    this.xScaleValue = this._enumHelper(DataRepository.getGeneralSettings().xScale, this.$.enumUnits.value);
                    let actTimeType = DataRepository.getGeneralSettings().timeType;

                    this.$.enumTimeType.value = actTimeType;
                    if (actTimeType == 1) {
                        this.$.enumTimeFormat.valueoptions = [];
                        this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                        this.$.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;
                        this.$.enumTimeFormat.state = 1;
                        this.$.enumTimeFormat.style.opacity = "1";   
                    } else if (actTimeType == 2) {
                        this.$.enumTimeFormat.valueoptions = [];
                        this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                        this.$.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;                        
                        this.$.enumTimeFormat.state = 1;
                        this.$.enumTimeFormat.style.opacity = "1";  
                    } else if (actTimeType == 3) {
                        this.$.enumTimeFormat.valueoptions = [];
                        this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesTime;
                        this.$.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;                        
                        this.$.enumTimeFormat.state = 1;
                        this.$.enumTimeFormat.style.opacity = "1";  
                    } else {
                        this.$.enumTimeFormat.state = 2;
                        this.$.enumTimeFormat.style.opacity = "0.5";      
                    }

                    if (DataRepository.getStatePauseResume()) {
                        this.statePauseResume = true;
                        this.pauseResumeText = this.pauseText;
                    } else {
                        this.statePauseResume = false;
                        this.pauseResumeText = this.resumeText;
                    }
                }
            }

            this.init = false;
        }
    }

    _pauseResumeAcknowledge(e) {
        this.statePauseResume = e.detail.statePauseResume;

        if (this.compositeActive) {
            if (this.btnPauseResume) this.btnPauseResume.sigbtndisabled = false;
            if (this.btnClearData) this.btnClearData.sigbtndisabled = false;
        } else {
            this.$.btnPauseResume.sigbtndisabled = false;
            this.$.btnClearData.sigbtndisabled = false;
        }

        if (!e.detail.ackSuccess) {
            if (this.statePauseResume) {
                /* this.wndApi.systemWindow_alert(this.pauseAcknErrorText, this.pauseAcknErrorTop, 2); */
                // alert Window
                window.sigApi.datapointManager.writeDataPoint('1:Schemevars1.DA_AlertTextScheme',3);
                this.wndApi.openWindow(0);
            } else {
                /* this.wndApi.systemWindow_alert(this.resumeAcknErrorText, this.resumeAcknErrorTop, 2); */
                // alert Window
                window.sigApi.datapointManager.writeDataPoint('1:Schemevars1.DA_AlertTextScheme',3);
                this.wndApi.openWindow(0);
            }
        } else {
            if (this.statePauseResume) {
                this.pauseResumeText = this.pauseText;
            } else {
                this.pauseResumeText = this.resumeText;
            }
        }
    }

    _clearDataAcknowledge(e) {
        if (this.compositeActive) {
            if (this.btnPauseResume) this.btnPauseResume.sigbtndisabled = false;
            if (this.btnClearData) this.btnClearData.sigbtndisabled = false;
        } else {
            this.$.btnPauseResume.sigbtndisabled = false;
            this.$.btnClearData.sigbtndisabled = false;
        }

        if (!e.detail.ackSuccess) {
            /* this.wndApi.systemWindow_alert(this.clearDataAcknErrorText, this.clearDataAcknErrorTop, 2); */
            // alert Window
            window.sigApi.datapointManager.writeDataPoint('1:Schemevars1.DA_AlertTextScheme',3);
            this.wndApi.openWindow(0);
        }
    }

    _timeFormatChangedDP(e) {
        if (this.compositeActive) {
            if (this.enumTimeFormat) this.enumTimeFormat.value = e.detail.timeFormat;
            if (this.enumTimeType) this.enumTimeType.value = e.detail.timeType;

            if (this.enumTimeType) {
                if (this.enumTimeType.value == 0) {
                    if (this.enumTimeFormat) {
                        this.enumTimeFormat.state = 2;
                        this.enumTimeFormat.style.opacity = "0.5";    
                    } 
                }
            }
        } else {
            this.$.enumTimeFormat.value = e.detail.timeFormat;
            this.$.enumTimeType.value = e.detail.timeType;           

            if (this.$.enumTimeType.value == 0) {
                this.$.enumTimeFormat.state = 2;
                this.$.enumTimeFormat.style.opacity = "0.5";     
            }

            if (this.$.enumTimeType.value == 1) {
                this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime
            }

            if (this.$.enumTimeType.value == 2) {
                this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate
            }

            if (this.$.enumTimeType.value == 3) {
                this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesTime
            }
        }
    }

    _onTimeTypeChanged(e) {     
        if (this.compositeActive) {
            if (this.enumTimeType) {
                let timeType = this.enumTimeType.value;
            
                if (this.enumTimeFormat) {
                    if (timeType == 0) {
                        this.enumTimeFormat.state = 2;
                        this.enumTimeFormat.style.opacity = "0.5";      
                    } else {
                        this.enumTimeFormat.state = 1;
                        this.enumTimeFormat.style.opacity = "1";
                        if (timeType == 1) {
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;
                            // this.enumTimeFormat.value = 0;
                        } else if (timeType == 2) {
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;
                            // this.enumTimeFormat.value = 0;
                        } else if (timeType == 3) {
                            this.enumTimeFormat.valueoptions = [];
                            this.enumTimeFormat.valueoptions = this.xAxisFormatValuesTime;
                            this.enumTimeFormat.value = DataRepository.getGeneralSettings().timeFormat;
                            // this.enumTimeFormat.value = 0;
                        }
                    } 
                }
            }
 
            if (!this.init) {
                if (this.enumTimeFormat && this.enumTimeType) {
                    dispatchEvent(new CustomEvent("timeFormat_Changed", {
                        'detail': {
                            timetype: this.enumTimeType.value,
                            timeformat: this.enumTimeFormat.value                
                        }
                    }));  
                }
            }

        } else {
            let timeType = this.$.enumTimeType.value;
            
            if (timeType == 0) {
                this.$.enumTimeFormat.state = 2;
                this.$.enumTimeFormat.style.opacity = "0.5";      
            } else {
                this.$.enumTimeFormat.state = 1;
                this.$.enumTimeFormat.style.opacity = "1";
                if (timeType == 1) {
                    this.$.enumTimeFormat.valueoptions = [];
                    this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDateTime;
                    this.$.enumTimeFormat.value = 0;
                } else if (timeType == 2) {
                    this.$.enumTimeFormat.valueoptions = [];
                    this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesDate;
                    this.$.enumTimeFormat.value = 0;
                } else if (timeType == 3) {
                    this.$.enumTimeFormat.valueoptions = [];
                    this.$.enumTimeFormat.valueoptions = this.xAxisFormatValuesTime;
                    this.$.enumTimeFormat.value = 0;
                }
            }  

            if (!this.init) {
                dispatchEvent(new CustomEvent("timeFormat_Changed", {
                    'detail': {
                        timetype:  this.$.enumTimeType.value,
                        timeformat: this.$.enumTimeFormat.value              
                    }
                }));  
            }
        }  
    }
    
    _onTimeFormatChanged(e) {
        if (this.compositeActive) {
            if (this.enumTimeType && this.enumTimeFormat) {
                dispatchEvent(new CustomEvent("timeFormat_Changed", {
                    'detail': {
                        timetype:  this.enumTimeType.value,
                        timeformat: this.enumTimeFormat.value                    
                    }
                }));   
            }
        } else {
            dispatchEvent(new CustomEvent("timeFormat_Changed", {
                'detail': {
                    timetype:  this.$.enumTimeType.value,
                    timeformat: this.$.enumTimeFormat.value                
                }
            }));   
        }     
    }

    onScaleXChanged(eventData) {       
		DataRepository.setxAxisPropertieChanged(true); 												  
        this.xScaleValue = eventData.detail.component.value;
    }

    //left to right/right to left changed externally (from VISUDesigner properties)
    _directionChanged(e) {										 
        if (!this.gotValues) {
            if (e.detail.direction == 'leftToRight') {
                if (!this.compositeActive) {
                    this.$.enumDirection.value = 0;
                } else {
                    if (this.enumDirection) this.enumDirection.value = 0;
                }
            } else {
                if (!this.compositeActive) {
                    this.$.enumDirection.value = 1;
                } else {
                    if (this.enumDirection) this.enumDirection.value = 1;
                }
            } 
			DataRepository.setxAxisPropertieChanged(true);
            DataRepository.setyAxisPropertieChanged(true);
            DataRepository.setGridChanged(true);											  									
        }
    }

    //xScale value changed (from VISUDesigner properties)
    _xScaleChanged(e) {     
        if (!this.gotValues) {      
            if (this.compositeActive) {
                if (this.inputScaleX) this.inputScaleX.value = e.detail.xscale;
            } else this.xScaleValue = e.detail.xscale;
        }
    }

    //xScale unit value changed (from VISUDesigner properties)
    _xScaleUnitChanged(e) {
        if (!this.gotValues) {
            let unit = this.unitValues.find(o => o.name == e.detail.unitscale).id;

            if (this.compositeActive) {
                if (this.enumUnits) this.enumUnits.value = unit;
            } else {
                this.$.enumUnits.value = unit;
            }
        }
    }

    //start/stop button changed e.g. from PLC
    _startStopButtonExternChanged(e) {
        if (!e.detail.state) {
            this.statePauseResume = false;
            this.pauseResumeText = this.resumeText;
        } else {
            this.statePauseResume = true;
            this.pauseResumeText = this.pauseText;
        }
    }

    _zoomStop(e) {
        this.statePauseResume = true;
        this.pauseResumeText = this.pauseText;
        this.onPauseResume();
    }

    //hide titlebar (from VISUDesigner properties)
    _hidetitlechanged(oldval, newval) {
        if (oldval) {
            this.$.content.style.setProperty('height', 'calc(100% - 2 * var(--theme-sig-control-da-generalsettings-border-width, 1px))');
            if (getComputedStyle(this.$.content).getPropertyValue('border-width') != '0px') this.$.content.style.setProperty('border-top-style', 'var(--theme-sig-control-da-generalsettings-border-style, solid)');
        } else {
            this.$.content.style.setProperty('height', 'calc(100% - var(--theme-sig-control-da-titlebar-height, 26px) - var(--theme-sig-control-da-generalsettings-border-width, 1px))');
            this.$.content.style.setProperty('border-top-style', 'none');
        }
    }

    //hide left to right button and related texts
    _hidedirectionchanged(oldval, newval) {
        if (newval) {
            this.$.btnDirection.state = 1;
            this.$.textDirection.state = 1;
        } else {
            this.$.btnDirection.state = 3;
            this.$.textDirection.state = 3;
        }
    }

    //hide xscale input and related texts
    _hidescalechanged(oldval, newval) {
        if (newval) {
            this.$.inputScaleX.state = 1;
            this.$.textXScale.state = 1;
            this.$.textSeconds.state = 1;
        } else {
            this.$.inputScaleX.state = 3;
            this.$.textXScale.state = 3;
            this.$.textSeconds.state = 3;
        }
    }

    //hide stop button and related texts
    _hidestopchanged(oldval, newval) {
        if (newval) {
            this.$.btnPauseResume.state = 1;
        } else {
            this.$.btnPauseResume.state = 3;
        }
    }

    //hide clear data button and related texts
    _hidecleardatachanged(oldval, newval) {
        if (newval) {
            this.$.btnClearData.state = 1;
        } else {
            this.$.btnClearData.state = 3;
        }
    }

    disVal(val) {
        this.x1Disabled = val;
        this.x2Disabled = val;
        this.y1Disabled = val;
        this.y2Disabled = val;
        this.upDisabled = val;
        this.downDisabled = val;
        this.leftDisabled = val;
        this.rightDisabled = val;
        this.cursorsChosenDisabled = val;
        this.stepXDisabled = val;
        this.stepYDisabled = val;
        this.werteDisabled = val;
        this.diffDisabled = val;
        this.snapXDisabled = val;
    }

    //check limits values for xscale input (needs to be overwritten like this)
    checkLimits(val) {
        const min = parseFloat(this.offsetParent.offsetParent.limitLow); //this.offsetParent.offsetParent is necessary, because inside this function we are in another scope
        const max = parseFloat(this.offsetParent.offsetParent.limitHigh);

        if (isNaN(min) || isNaN(max)) {
            return [-1, undefined];
        } else if (this.min > val) {
            return [-1, val];
        } else if (this.max < val) {
            return [1, val];
        } else {
            return [0, val];
        }
    }

    //left to right/right to left changed (button pressed)
    onRightToLeftChanged(e) {
        if (!this.init) {
			DataRepository.setyAxisPropertieChanged(true);
            DataRepository.setxAxisPropertieChanged(true);
            DataRepository.setGridChanged(true);									
            dispatchEvent(new CustomEvent("rightToLeft_Changed", {
                'detail': {
                    rightToLeft: e.detail.component.value
                }
            }));
        }
    }

    //clear data button press event
    onClearData() {
        dispatchEvent(new CustomEvent("clearDatafromCanvas"));

        if (this.compositeActive) {
            if (this.btnPauseResume) this.btnPauseResume.sigbtndisabled = true;
            if (this.btnClearData) this.btnClearData.sigbtndisabled = true;
        } else {
            this.$.btnPauseResume.sigbtndisabled = true;
            this.$.btnClearData.sigbtndisabled = true;
        }
		
		//JSManager.setCanvasDrawing(false);
        //JSManager.clearRingBuffer(); //Clear the buffers												
    }

    //pause/resume button press event
    onPauseResume() {
/*          if (!this.compositeActive) {
            if (this.statePauseResume) {
                this.statePauseResume = false;
                this.pauseResumeText = this.resumeText;
            } else {
                this.statePauseResume = true;
                this.pauseResumeText = this.pauseText;
            }
        } else {
            if (this.statePauseResume) {
                this.statePauseResume = false;
                this.btnPauseResume.sigbtntext = this.btnPauseResume.sigbtntextpressed = this.pauseResumeText = this.resumeText;
            } else {
                this.statePauseResume = true;
                this.btnPauseResume.sigbtntext = this.btnPauseResume.sigbtntextpressed = this.pauseResumeText = this.pauseText;
            }
        }  */

        if (this.compositeActive) {
            if (this.btnPauseResume) this.btnPauseResume.sigbtndisabled = true;
            if (this.btnClearData) this.btnClearData.sigbtndisabled = true;
        } else {
            this.$.btnPauseResume.sigbtndisabled = true;
            this.$.btnClearData.sigbtndisabled = true;
        }

        dispatchEvent(new CustomEvent("startStop_Changed", {
            'detail': {
                state: !this.statePauseResume
            }
        }));
    }

    //units enum value changed event (change units for the kurvendiagramm)
    onUnitsChanged(e) {
        console.log("onUnitsChanged");

        if (!this.init) {
            let unit;//, unitTypeNum;

            unit = this.unitValues.find(o => o.id == e.detail.component.value).name;
            //unitTypeNum = this.unitValues.find(o => o.id == e.detail.component.value).id;

            //let newValue = this._enumHelper(DataRepository.getGeneralSettings().xScale, unitTypeNum);  

            // this.init = true;
            // if (!this.compositeActive) {
            //     this.xScaleValue = newValue;
            // } else {
            //     this.inputScaleX.value = newValue;
            // }
            // this.init = false;
             
            if (this.compositeActive && this.inputScaleX) {
                dispatchEvent(new CustomEvent("unitXScale_Changed", {
                    'detail': {
                        scaleX: this.inputScaleX.value,
                        unit: unit
                    }
                }));
            } else {
                dispatchEvent(new CustomEvent("unitXScale_Changed", {
                    'detail': {
                        scaleX: this.xScaleValue,
                        unit: unit
                    }
                }));
            }
        }
    }
    
    //scaleX value changed event
    _scaleXchanged() {
        if (!this.init) {
            let enumVal = this._scaleHelper();

            if (JSManager.getMinSampleRate() > enumVal * DataRepository.getGridXLines()) {
                /* this.wndApi.systemWindow_alert(this.scaleXErrorText, this.scaleXErrorTop, 2); */
                //alert window
                window.sigApi.datapointManager.writeDataPoint('1:Schemevars1.DA_AlertTextScheme',3);
                this.wndApi.openWindow(0);

                //change value back
                if (!this.compositeActive) {
                    this.xScaleValue = DataRepository.getConvertedXScale();
                } else {
                    if (this.inputScaleX) this.inputScaleX.value = DataRepository.getConvertedXScale();
                }
            } else {
                dispatchEvent(new CustomEvent("scaleXChangedEvent", {
                    'detail': {
                        scaleX: enumVal
                    }
                }));
            }
        }
    }

    //unit conversion (GeneralSettings -> DataRepository)
    _scaleHelper() {
        console.log("scaleHelper");

        let enumVal;
        let unitsType;

        const hours = 24;
        const min = 60;
        const thsnd = 1000;

        if (!this.compositeActive) {
            enumVal = this.xScaleValue;
            unitsType = (this.$.enumUnits.value == null) ? 3 : this.$.enumUnits.value;
        } else {
            if (this.inputScaleX.value) enumVal = this.inputScaleX.value;
            unitsType = (this.enumUnits.value == null) ? 3 : this.enumUnits.value; 
        } 

        if (this.inputScaleX.value) {
            if (unitsType == 0) enumVal = enumVal*(Math.pow(thsnd, 2)*(Math.pow(min, 2)*hours)); //days/div
            else if (unitsType == 1) enumVal = enumVal*((Math.pow(thsnd, 2)*Math.pow(min, 2))); //hours/div
            else if (unitsType == 2) enumVal = enumVal*((Math.pow(thsnd, 2)*min)); //minute/div
            else if (unitsType == 3) enumVal = enumVal*(Math.pow(thsnd, 2)); //second/div
            else if (unitsType == 4) enumVal = enumVal*thsnd; //ms/div
            return enumVal;
        }
    }

    //unit conversion (DataRepository -> GeneralSettings)
    _enumHelper(value, unitsType) {
        const hours = 24;
        const min = 60;
        const thsnd = 1000;

        if (unitsType == 0) return value/(Math.pow(thsnd, 2)*(Math.pow(min, 2)*hours));
        else if (unitsType == 1) return value/((Math.pow(thsnd, 2)*Math.pow(min, 2)));
        else if (unitsType == 2) return value/((Math.pow(thsnd, 2)*min));
        else if (unitsType == 3) return value/(Math.pow(thsnd, 2));
        else if (unitsType == 4) return value/thsnd;

        return value;
    }
}
window.customElements.define(LasalRuntimeSigDaGeneralSettings.is, LasalRuntimeSigDaGeneralSettings);
