// widget_tooglebutton.ysl2


widget_desc("ToggleButton") {
    longdesc
    ||
    Button widget takes one boolean variable path, and reflect current true
    or false value by showing "active" or "inactive" labeled element
    respectively. Clicking or touching button toggles variable.
    ||

    shortdesc > Toggle button reflecting given boolean variable

    path name="value" accepts="HMI_BOOL" > Boolean variable
    
}

widget_class("ToggleButton") {
    ||
        frequency = 5;
        state = 0;
        active_style = undefined;
        inactive_style = undefined;

        dispatch(value) {
            this.state = value;
            //redraw toggle button
            this.request_animate();
        }

        on_click(evt) {
            //toggle state and apply
            this.state = this.state ? false : true;
            this.apply_hmi_value(0, this.state);

            //redraw toggle button
            this.request_animate();
        }

        set_state(active) {
            if (this.active_elt){
                if(active==undefined || !active){
                    if(this.active_elt_parent == undefined){
                        this.active_elt_parent = this.active_elt.parentElement;
                        this.active_elt_parent.removeChild(this.active_elt);
                    }
                }else{
                    if(this.active_elt_parent != undefined){
                        this.active_elt_parent.insertBefore(this.active_elt, this.active_elt_sibling);
                        this.active_elt_parent = undefined;
                    }
                }
            }
            if (this.inactive_elt){
                if(active==undefined || active){
                    if(this.inactive_elt_parent == undefined){
                        this.inactive_elt_parent = this.inactive_elt.parentElement;
                        this.inactive_elt_parent.removeChild(this.inactive_elt);
                    }
                }else{
                    if(this.inactive_elt_parent != undefined){
                        this.inactive_elt_parent.insertBefore(this.inactive_elt, this.inactive_elt_sibling);
                        this.inactive_elt_parent = undefined;
                    }
                }
            }
        }

        animate(){
            // redraw toggle button on screen refresh
            this.set_state(this.state);
        }

        init() {
            this.element.onclick = (evt) => this.on_click(evt);
            this.active_elt_parent = undefined;
            this.active_elt_sibling = this.active_elt.nextSibling;
            this.inactive_elt_parent = undefined;
            this.inactive_elt_sibling = this.inactive_elt.nextSibling;
            if(this.inactive_elt_sibling == this.active_elt)
                this.inactive_elt_sibling = this.inactive_elt_sibling.nextSibling;
            if(this.active_elt_sibling == this.inactive_elt)
                this.active_elt_sibling = this.active_elt_sibling.nextSibling;
            this.set_state(undefined);
        }
    ||
}

widget_defs("ToggleButton") {
    optional_labels("active inactive");
}