// 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();
        }

        activate(val) {
            let [active, inactive] = val ? ["none",""] : ["", "none"];
            if (this.active_elt)
                this.active_elt.style.display = active;
            if (this.inactive_elt)
                this.inactive_elt.style.display = inactive;
        }

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

        init() {
            this.activate(false);
            this.element.onclick = (evt) => this.on_click(evt);
        }
    ||
}

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