// Import the Lasal Runtime base element into your component
// Import SigPolymer to use Polymer methods: html, afterNextRender, beforeNextRender, debouncer, timeOut
// or if your component's getter template() returns a HTML literal
import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
import '../sig-control-led/sig-control-led.js';
import '../sig-control-led/sig-control-led-css.js';
/****************************************************************************************************
 * @class LasalRuntimeSigImageButtonElement
 * @extends {LasalRuntimeSigElement}
 ****************************************************************************************************/
export class LasalRuntimeSigImageButtonElement 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
     ****************************************************************************************************/
    static get importMeta() {
        return import.meta;
    }

    /****************************************************************************************************
      * Return the component style and template as a template literal
     ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`
        <style include="sig-element-css sig-control-led-css">
            :host {
                /* Basic styling of the component */
                color: var(--theme-sig-control-image-button-color, inherit);

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

                /* default offsets for LED positions */
                --led-offset: var(--theme-sig-control-image-button-border-width, 1px);
                --led-height-offset: var(--theme-sig-control-image-button-led-margin-height, 3px);
                --led-width-offset: var(--theme-sig-control-image-button-led-margin-width, 3px);
            }

            :host * {
                /* Reset margins and paddings for child elements and turn of text selection */
                @apply --notextselect;
                margin: 0;
                padding: 0;
            }

            .clearfix:after {
                @apply --clearfix
            }

            .sig-control-image-button-base {
                color: inherit;
                /* display: table; */
                display: block;
                width: 100%;
                height: 100%;
                position: relative;

                box-sizing: inherit;
                text-decoration: inherit;
                border: none;

                border-top-left-radius: var(--theme-sig-control-image-button-border-radius-tl, var(--theme-sig-control-image-button-border-radius, 3px));
                border-top-right-radius: var(--theme-sig-control-image-button-border-radius-tr, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-right-radius: var(--theme-sig-control-image-button-border-radius-br, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-left-radius: var(--theme-sig-control-image-button-border-radius-bl, var(--theme-sig-control-image-button-border-radius, 3px));

                cursor: pointer;
            }

            :host(:not([btnvalue="0"])) {
                border-color: var(--theme-sig-control-image-button-pressed-border-color, var(--theme-sig-control-image-button-border-color));
            }

            :host(:not([btnvalue="0"])[bordergradientpressed]) {
                border-width: 0px;
            }

            :host([btnvalue="0"][bordergradient]) {
                border-width: 0px;
            }

            :host([btnvalue="0"][bordergradient]) .sig-control-image-button-base {
                background-image: linear-gradient(var(--theme-sig-control-image-button-border-color-direction, to bottom), var(--theme-sig-control-image-button-border-color, inherit), var(--theme-sig-control-image-button-border-color-stop, var(--theme-sig-control-image-button-border-color)));
                padding: var(--theme-sig-control-image-button-border-width, 1px);
            }


            :host(:not([btnvalue="0"])[bordergradientpressed]) .sig-control-image-button-base {
                background-image: linear-gradient(var(--theme-sig-control-image-button-pressed-border-color-direction, to bottom), var(--theme-sig-control-image-button-pressed-border-color, var(--theme-sig-control-image-button-border-color)), var(--theme-sig-control-image-button-pressed-border-color-stop, var(--theme-sig-control-image-button-border-color-stop)));
                padding: var(--theme-sig-control-image-button-border-width, 1px);
            }


            #sig-control-image-button-foreground {
                /* Border (radius) hack - backgroundprops applied on Shadow-DOM Element */
                background-color: var(--theme-sig-control-image-button-background-color, inherit);
                background-image: linear-gradient(var(--theme-sig-control-image-button-background-color-direction, to bottom),
                        var(--theme-sig-control-image-button-background-color, inherit),
                        var(--theme-sig-control-image-button-background-color-stop, var(--theme-sig-control-image-button-background-color, inherit)));


                background-position-x: var(--theme-sig-control-image-button-background-position-x, center);
                background-position-y: var(--theme-sig-control-image-button-background-position-y, center);
                background-size: var(--theme-sig-control-image-button-background-size, contain);
                background-repeat: no-repeat;

                /* calc actual size of image */
                --theme-sig-control-image-button-background-size-numeric:  calc(100% - (2 * var(--theme-sig-control-image-button-background-padding)));

                border: none;
                border-radius: inherit;

                border-width: var(--theme-sig-control-image-button-border-width, 0px);
                border-color: var(--theme-sig-control-image-button-border-color, inherit);
                border-style: var(--theme-sig-control-image-button-border-style, solid);
                
                border-top-left-radius: var(--theme-sig-control-image-button-border-radius-tl, var(--theme-sig-control-image-button-border-radius, 3px));
                border-top-right-radius: var(--theme-sig-control-image-button-border-radius-tr, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-right-radius: var(--theme-sig-control-image-button-border-radius-br, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-left-radius: var(--theme-sig-control-image-button-border-radius-bl, var(--theme-sig-control-image-button-border-radius, 3px));
            
                box-sizing: border-box;
            }

            #sig-control-image-button-background {
                background-color: var(--theme-sig-control-image-button-pressed-background-color, inherit);

                background-image: linear-gradient(var(--theme-sig-control-image-button-pressed-background-color-direction, to bottom),
                        var(--theme-sig-control-image-button-pressed-background-color, inherit),
                        var(--theme-sig-control-image-button-pressed-background-color-stop, var(--theme-sig-control-image-button-pressed-background-color)));

                background-position-x: var(--theme-sig-control-image-button-background-position-x, center);
                background-position-y: var(--theme-sig-control-image-button-background-position-y, center);
                background-size: var(--theme-sig-control-image-button-background-size, contain);
                background-repeat: no-repeat;

                /* calc actual size of image */
                --theme-sig-control-image-button-background-size-numeric:  calc(100% - (2 * var(--theme-sig-control-image-button-background-padding)));

                /* set size of background image, set size of linear-gradient */
                background-size: var(--theme-sig-control-image-button-background-size-numeric, var(--theme-sig-control-image-button-background-size, contain)), contain;

                color: var(--theme-sig-control-image-button-pressed-color, inherit);
                border: none;
                border-radius: inherit;

                border-width: var(--theme-sig-control-image-button-border-width, 0px);
                border-color: var(--theme-sig-control-image-button-pressed-border-color, var(--theme-sig-control-image-button-border-color));
                border-style: var(--theme-sig-control-image-button-border-style, solid);

                border-top-left-radius: var(--theme-sig-control-image-button-border-radius-tl, var(--theme-sig-control-image-button-border-radius, 3px));
                border-top-right-radius: var(--theme-sig-control-image-button-border-radius-tr, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-right-radius: var(--theme-sig-control-image-button-border-radius-br, var(--theme-sig-control-image-button-border-radius, 3px));
                border-bottom-left-radius: var(--theme-sig-control-image-button-border-radius-bl, var(--theme-sig-control-image-button-border-radius, 3px));
            
                box-sizing: border-box;
            }

            :host([bordergradient]) #sig-control-image-button-foreground,
            :host([bordergradientpressed]) #sig-control-image-button-background {
                border: none;
                border-top-left-radius: calc(var(--theme-sig-control-image-button-border-radius-tl, var(--theme-sig-control-image-button-border-radius, 3px)) - var(--theme-sig-control-image-button-border-width, 0px));
                border-top-right-radius: calc(var(--theme-sig-control-image-button-border-radius-tr, var(--theme-sig-control-image-button-border-radius, 3px)) - var(--theme-sig-control-image-button-border-width, 0px));
                border-bottom-right-radius: calc(var(--theme-sig-control-image-button-border-radius-br, var(--theme-sig-control-image-button-border-radius, 3px)) - var(--theme-sig-control-image-button-border-width, 0px));
                border-bottom-left-radius: calc(var(--theme-sig-control-image-button-border-radius-bl, var(--theme-sig-control-image-button-border-radius, 3px)) - var(--theme-sig-control-image-button-border-width, 0px));  
            }

            #sig-control-image-button-foreground .textlabel:before {
                @apply --symbol;
            }

            #sig-control-image-button-background .textlabel:before {
                @apply --symbol;
            }

            #sig-control-image-button-background {
                background-image: linear-gradient(var(--theme-sig-control-image-button-pressed-background-color-direction, to bottom),
                        var(--theme-sig-control-image-button-pressed-background-color, inherit),
                        var(--theme-sig-control-image-button-pressed-background-color-stop, var(--theme-sig-control-image-button-pressed-background-color)));
            }

            :host([shadowactive]) #sig-control-image-button-foreground {
                box-shadow: inset 0 0 var(--theme-sig-control-image-button-shadow-size, 5px) var(--theme-sig-control-image-button-shadow-color, inherit);
            }

            :host([shadowpressedactive]) #sig-control-image-button-background {
                box-shadow: inset 0 0 var(--theme-sig-control-image-button-pressed-shadow-size, 0px) var(--theme-sig-control-image-button-pressed-shadow-color, inherit);
            }

            :host(:not([btnvalue="0"])) #sig-control-image-button-foreground {
                display: none;
            }

            :host([btnvalue="0"]) #sig-control-image-button-background {
                display: none;
            }

            .textlabel {
                display: table-cell;
                cursor: inherit;
                width: 100%;
                height: 100%;
                text-decoration: inherit;
            }

            .sig-control-image-button-base>div {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: var(--theme-sig-control-image-button-flex-direction, row);
                justify-content: var(--theme-sig-control-image-button-justify-content, space-evenly);
                align-items: var(--theme-sig-control-image-button-align-items, center);
            }

            .textlabel {
                width: auto;
                height: auto;
                align-self: var(--theme-sig-control-image-button-text-align-self, inherit);
                padding-left: var(--theme-sig-control-image-button-text-padding-left, 0px);
                padding-top: var(--theme-sig-control-image-button-text-padding-top, 0px);
                padding-right: var(--theme-sig-control-image-button-text-padding-right, 0px);
                padding-bottom: var(--theme-sig-control-image-button-text-padding-bottom, 0px);
                margin-left: var(--theme-sig-control-image-button-text-margin-left, 0px);
                margin-top: var(--theme-sig-control-image-button-text-margin-top, 0px);
                margin-right: var(--theme-sig-control-image-button-text-margin-right, 0px);
                margin-bottom: var(--theme-sig-control-image-button-text-margin-bottom, 0px);
                text-align: var(--theme-sig-control-image-button-text-align-horizontal, center);
            }

            .image {
                align-self: var(--theme-sig-control-image-button-image-align-self, inherit);
                padding-left: var(--theme-sig-control-image-button-image-padding-left, 0px);
                padding-top: var(--theme-sig-control-image-button-image-padding-top, 0px);
                padding-right: var(--theme-sig-control-image-button-image-padding-right, 0px);
                padding-bottom: var(--theme-sig-control-image-button-image-padding-bottom, 0px);
                margin-left: var(--theme-sig-control-image-button-image-margin-left, 0px);
                margin-top: var(--theme-sig-control-image-button-image-margin-top, 0px);
                margin-right: var(--theme-sig-control-image-button-image-margin-right, 0px);
                margin-bottom: var(--theme-sig-control-image-button-image-margin-bottom, 0px);
            }

            .image img {
                height: var(--theme-sig-control-image-button-image-height, auto);
                width: var(--theme-sig-control-image-button-image-width, auto);
            }

            #sig-control-image-button-foreground .textlabel:empty {
                display: none;
            }

            #sig-control-image-button-foreground .image[src=""] {
                display: none;
            }

            :host([bordergradient]) #led, :host([bordergradient][value="0"]) #led, :host([bordergradientpressed]:not([value="0"])) #led {
                --led-height-offset: calc(var(--led-offset, 1px) + var(--theme-sig-control-image-button-led-margin-height, 3px));
                --led-width-offset: calc(var(--led-offset, 1px) + var(--theme-sig-control-image-button-led-margin-width, 3px));
            }
            :host([ledpositioning="topleft"]) #led {
                top: var(--led-height-offset);
                left: var(--led-width-offset);
            }
            :host([ledpositioning="topright"]) #led {
                top: var(--led-height-offset);
                right: var(--led-width-offset);
            }
            :host([ledpositioning="bottomleft"]) #led {
                bottom: var(--led-height-offset);
                left: var(--led-width-offset);
            }
            :host([ledpositioning="bottomright"]) #led {
                bottom: var(--led-height-offset);
                right: var(--led-width-offset);
            }

            #led {
                position: absolute;
                width: var(--theme-sig-element-width, 10px);
                height: var(--theme-sig-element-height, 10px);
                
                --theme-sig-control-led-vertical-align: middle;     
            }

            .image {
                pointer-events: none;
                align-items: center;
            }

            #boxshadowcontainer {
                position: absolute;
                display: none;
                background-color: transparent;
                width: 100%;
                height: var(--child-height);
            }
    
            :host([shadowactive]:not([listvisible])) #boxshadowcontainer {
                display: block;
                box-shadow: inset 0 0 var(--theme-sig-control-image-button-shadow-size, 0px) var(--theme-sig-control-image-button-shadow-color, inherit);
            }
    
            :host([shadowpressedactive][listvisible]) #boxshadowcontainer {
                display: block;
                box-shadow: inset 0 0 var(--theme-sig-control-image-button-pressed-shadow-size, 0px) var(--theme-sig-control-image-button-pressed-shadow-color, inherit);
            }

            .bgcontainer {
                position: absolute;
                height:100%;
                width:100%;
                top:0;
                left: 0;
                box-sizing: border-box;
                padding: var(--theme-sig-control-image-button-background-padding);
            }

            .backgroundimage {
                position: relative;
                height: 100%;
                width: 100%;
                
                background-position-x: var(--theme-sig-control-image-button-background-position-x, center);
                background-position-y: var(--theme-sig-control-image-button-background-position-y, center);
                background-size: var(--theme-sig-control-image-button-background-size, contain);
                background-repeat: no-repeat;
                background-origin: content-box;
                box-sizing: border-box;
            }

            #sig-control-image-button-foreground .backgroundimage {
                background-image: var(--theme-sig-control-image-button-background-image, none);
            }

            #sig-control-image-button-background .backgroundimage {
                background-image: var(--theme-sig-control-image-button-pressed-background-image, var(--theme-sig-control-image-button-background-image, none));
            }
    
            .textlabel {
                display: table-cell;
            }

            .image {
                display: flex;
            }

            :host([btntextc=""]) #sig-control-image-button-foreground .textlabel {
                display: none;
            }
            :host([btntextpressedc=""]) #sig-control-image-button-background .textlabel {
                display: none;
            }

            :host([btnimage=""]) #sig-control-image-button-foreground .image,
            :host([btnimage="none"]) #sig-control-image-button-foreground .image {
                display: none;
            }

            :host([btnimagepressedc=""]) #sig-control-image-button-background .image,
            :host([btnimagepressedc="none"]) #sig-control-image-button-background .image {
                display: none;
            }
        </style>

        <div class="sig-control-image-button-base clearfix" on-tap="_handleTap" on-down="_handleDown" on-up="_handleUp">
            <div id="sig-control-image-button-background">
                <div class="bgcontainer"><div class="backgroundimage"></div></div>
                <div class="textlabel">[[btntextpressedc]]</div>
                <div class="image">
                    <img src="[[btnimagepressedc]]">
                </div>
            </div>
            <div id="sig-control-image-button-foreground">
                <div class="bgcontainer"><div class="backgroundimage"></div></div>
                <div class="textlabel">[[btntextc]]</div>
                <div class="image">
                    <img src="[[btnimage]]">
                </div>
            </div>

            <template is="dom-if" if="[[ledinbuttonactiv]]">
                <!-- class led still needed as used in publishName of style class property -> cannot be changed otherwise style class is not
                        applied properly after update -->
                <sig-control-led id="led" class="led" value="[[ledvalue]]" preview=[[previewled]] showboxshadow="[[ledboxshadow]]"></sig-control-led>
            </template>
        </div>
        `;
    }



    /****************************************************************************************************
     * define the custom tag name
     ****************************************************************************************************/
    static get is() {
        return "sig-control-image-button";
    }

    /****************************************************************************************************
     * define the main porperties of the component
     * reflected property names should always be lower case so it can be used directly on the element as an attribute
     ****************************************************************************************************/
    static get properties() {
        // property names should always be lower case so we
        // can use them directly on the element as an attribute
        let props = {
            //needed for computed of btntextc if set from outside
            btntext: {
                type: String,
                value: ''
            },            
            btntextc: {
                type: String,
                computed: '_computeText(btntext,previewtext,isstylepreview)',
                reflectToAttribute: true
            },
            btnimage: {
                type: String,
                value: '',
                reflectToAttribute: true
            },
            btnimagepressedc: {
                type: String,
                computed: '_computePressedImage(btnimage, btnimagepressed)',
                reflectToAttribute: true
            },
            btntextpressedc: {
                type: String,
                computed: '_computePressedText(btntext,btntextpressed,previewtext,isstylepreview)',
                reflectToAttribute: true
            },
            btnvalue: {
                type: Number,
                value: 0,
                reflectToAttribute: true
            },
            value: {
                type: Number,
                value: 0,
                observer: '_stateChanged',
                notify: true
            },
            valueset: {
                type: Number,
                value: 1,
                observer: '_valueOnOffChanged',
            },
            valuereset: {
                type: Number,
                value: 0,
                observer: '_valueOnOffChanged',
            },
            shadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            shadowpressedactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            bordergradient: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            bordergradientpressed: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            ledpositioning: {
                type: String,
                value: 'topleft',
                reflectToAttribute: true
            },
            preview: {
                type: Boolean,
                value: false,
                observer: '_previewChanged'
            }
        }
        return props;
    }

    /****************************************************************************************************
     * called when the element has been created, but before property values are set and local DOM is initialized
     ****************************************************************************************************/
    constructor() {
        super();
        this.interval = null;
        this.timeout = null;
        this.btnimagepressed = '';
        this.btntext = '';
        this.btntextpressed = '';
        this.btntype = 'click';
        this.btnintervaltype = 'singleshot'; // singleshot, autorepeat
        this.btnrepeatinterval = 100 //Milliseconds
        this.btnintervaleventtype = 'interval'; //mousedown, mouseup, tap
        this.showundefinedon = true;        
        this.valueDpId = null;
        this.ledvalue = 0;
        this.ledinbuttonactiv = false;
        this.ledboxshadow = true;
        this.previewled = false;
        this.previewtext = '-- Image Button --';

        this.dpApi = window.sigApi.datapointManager;
        this.propApi = window.sigApi.properties;

        if(this.sigSetForceUpdateForProperty) this.sigSetForceUpdateForProperty('value');
        this.addPredefProps([{
            src: 'value',
            dest: 'state',
            type: window.sigApi.SIG_CONST.PROP_PREDEF_PROPS_TYPE_STATE
        }]);

        this.sigAddRequiredProperty('value');
        this.sigAddRequiredProperty('valueset');
        this.sigAddRequiredProperty('valuereset');
    }

    /****************************************************************************************************
     *  called after property default values are set and local DOM is initialized
     ****************************************************************************************************/
    ready() {
        super.ready();
        this.isReady = true;

        if ((this.propsReady) || (this.isdesignmode)) {
            this._updateButtonState(this.value);            
        }

        if (!this.isdesignmode) {
            SigPolymer.afterNextRender(this, function () {
                this.sigAddEventListener('APPROUTE_CHG', (maID, miID, message) => {
                    this._stopAutorepeat();
                }, 'runtimeEvent');
            });
        }
    }

    /****************************************************************************************************
    * called when values are ready
    *
    * @memberof LasalRuntimeSigImageButtonElement
    ****************************************************************************************************/
    sigOnRequiredPropertiesReady() {
        super.sigOnRequiredPropertiesReady();
        this.propsReady = true;
        
        if (this.isReady) {
            this._updateButtonState(this.value);            
        }
    }

    /****************************************************************************************************
    * shows the state according to the passed parameter and the value of valueon/valueoff
    *
    * @memberof LasalRuntimeSigButtonElement
    ****************************************************************************************************/
    _updateButtonState(newstate) {
        //in designer we get "000000000" if datapoint is configured
        //as we are working with the btnvalue for preview we need to take the preview value
        if (this.isdesignmode) {
            if (this.preview) {
                this.btnvalue = 1;
            }
            else {
                this.btnvalue = 0;
            }
        } 
        else {
            if (newstate === this.valueset) {
                this.btnvalue = 1;
            } else if (newstate === this.valuereset) {
                this.btnvalue = 0;
            } else {
                this.btnvalue = this.showundefinedon ? 1 : 0;
            }                
        }         
    }

    /**
    * An observer method that is fired every time the property 'value' changed
    * @private
    * @param {Number} newstate The new value of the value property
    * @param {Number} oldstate The old value of the value property
    * @returns {Undefined} Undefined
    * @memberof LasalRuntimeSigImageButtonElement
    */
     _stateChanged(newstate, oldstate) {
        if (newstate !== undefined) {
            this._updateButtonState(newstate);
        }
    }

    /****************************************************************************************************
    * Observer for the valueon and valueoff prop
    * @param {*} newstate
    * @param {*} oldstate
    ****************************************************************************************************/
    _valueOnOffChanged(newstate, oldstate) {
        if (newstate !== undefined) {
            this._updateButtonState(this.value);
        }
    }
    
    /**
     * A method that handles the on-down event on button.
     * @private
     * @param {Event} event on-down Event
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigImageButtonElement
     */
     _handleTap(event) {
        if (!this.isdesignmode) {
            this._dispatchEvent('tap');
        }
    }

    /**
     * A method that handles the on-down event on button.
     * @private
     * @param {Event} event on-down Event
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigImageButtonElement
     */
    _handleDown(event) {
        if (!this.isdesignmode) {
            if (this.btntype === 'click') {
                this.value = this.valueset;
            } else {
                if (parseFloat(this.value) !== this.valueset) {
                    this.value = this.valueset;
                } else {
                    this.value = this.valuereset;
                }
            }
            // send event after changing the datapoint, so the new value can be used in the function block
            this._dispatchEvent('mousedown');

            // handle autorepeat
            if (this.btnintervaltype === 'autorepeat') {
                this._setInterval();
            }          
        }
    }

    /**
    * A method that handles the on-up event on button
    * @private
    * @param {Event} event on-up event.
    * @returns {Undefined} Undefined
    * @memberof LasalRuntimeSigImageButtonElement
    */
    _handleUp(event) {
        if (!this.isdesignmode) {
            // handle autorepeat -> needs to be done first otherwise interval will overwrite value set
            if (this.btnintervaltype === 'autorepeat') {
                this._clearInterval();
            }              
            if (this.btntype === 'click') {
                this.value = this.valuereset;
            }
            // send event after changing the datapoint, so the new value can be used in the function block
            this._dispatchEvent('mouseup');
        }
    }

    /**
     * Sets the interval that dispatches defined events.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigImageButtonElement
    */
    _setInterval() {
        this.timeout = this.sigSetTimeout(() => {
            // write on datapoint directly
            this._writeDatapoint();
            this._dispatchEvent(this.btnintervaleventtype);
            this.interval = this.sigSetInterval(() => {
                // write on datapoint in interval
                this._writeDatapoint();
                this._dispatchEvent(this.btnintervaleventtype);
            }, this.btnrepeatinterval);
        }, this.btnrepeatdelay);
    }

    _writeDatapoint() {
        //we need to fetch property everytime to get datapoint in case of datapoint-scheme configured
        if ((this.propApi !== null) && (this.dpApi !== null)) {
            //check if property configured
            const prop = this.propApi.getProperty(this.id, 'value');
            if (prop !== null) {
                //get datapoint
                const dp = prop.getDatapoint();
                if (dp !== null) {
                    //write value
                    this.dpApi.writeDataPoint(dp.getId(), this.value);
                }
                else {
                    this._log('_writeDatapoint(): failed to get datapoint', 'ERROR');
                }
            }
        }
        else {
            this._log('_writeDatapoint(): invalid apis', 'ERROR');
        }
    }

    /**
     * Clears the interval that dispatches events.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigImageButtonElement
     */
    _clearInterval() {
        if (this.timeout !== null) {
            this.sigClearTimeout(this.timeout);
            this.timeout = null;
        }
        if (this.interval !== null) {
            this.sigClearInterval(this.interval);
            this.interval = null;
        }
    }

    /**
     * Autorepeat interval is cleared if a new route is set.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigImageButtonElement
     */
    _stopAutorepeat() {
        if (this.interval !== null) {
            this._clearInterval();
            if (this.btntype = "toggle") {
                this.value = this.valuereset;
            }
        }
    }

    /****************************************************************************************************
    * Computed property method that computes the button text.
    * @private
    * @param {String} normal Button text from the text list.
    * @param {String} _previewtext Preview button text.
    * @param {Boolean} _isstylepreview True, if buton is in previewmode.
    * @returns {String} The computed property.
    * @memberof LasalRuntimeSigImageButtonElement
    ****************************************************************************************************/
    _computeText(normal, _previewtext, _isstylepreview) {
        return (normal === '' && this.isdesignmode && _isstylepreview) ? _previewtext : normal;
    }

    /****************************************************************************************************
    * Computes the pressed text
    * If there is an text for the pressed state that is used,
    * otherwise the normal text is used
    * @param {String} normal Pressed normal text.
    * @param {String} pressed Pressed button text.
    * @returns
    ****************************************************************************************************/
    _computePressedText(normal, pressed, _previewtext, _isstylepreview) {
        return (pressed === '') ? ((normal === '' && this.isdesignmode && _isstylepreview) ? _previewtext : normal) : pressed;
    }

    /****************************************************************************************************
     * Computes the pressed text
     * If there is an image for the pressed state that is used,
     * otherwise the normal image is used
     * @param {string} [normal='']
     * @param {string} [pressed='']
     * @returns
     ****************************************************************************************************/
    _computePressedImage(normal = '', pressed = '') {
        return (pressed === '') ? normal : pressed;
    }

    /****************************************************************************************************
    * Called when changing the preview value in the designer
    *
    * @memberof LasalRuntimeSigImageButtonElement
    ****************************************************************************************************/
     _previewChanged() {
        if (this.isdesignmode) {
            if (this.preview) {
                this.btnvalue = 1;
            } else {
                this.btnvalue = 0;
            }
        }
    }    
}
customElements.define(LasalRuntimeSigImageButtonElement.is, LasalRuntimeSigImageButtonElement);
