// widget_multistate.ysl2

template "widget[@type='MultiState']", mode="widget_class"
    ||
    class MultiStateWidget extends Widget{
        frequency = 5;
        state = 0;
        dispatch(value) {
            this.state = value;
            for(let choice of this.choices){
                if(this.state != choice.value){
                    choice.elt.setAttribute("style", "display:none");
                } else {
                    choice.elt.setAttribute("style", choice.style);
                }
            }
        }

        on_click(evt) {
            //get current selected value
            let next_ind;
            for(next_ind=0; next_ind<this.choices.length; next_ind++){
                if(this.state == this.choices[next_ind].value){
                   next_ind = next_ind + 1;
                   break;
                }
            }

            //get next selected value
            if(this.choices.length > next_ind){
                this.state = this.choices[next_ind].value;
            }
            else{
                this.state = this.choices[0].value;
            }

            //post value to plc
            this.apply_hmi_value(0, this.state);
        }

        init() {
            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
        }
    }
    ||

template "widget[@type='MultiState']", mode="widget_defs" {
    param "hmi_element";
    |     choices: [
    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
    foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {
        const "literal", "regexp:match(@inkscape:label,$regex)[2]";
    |         {
    |             elt:id("«@id»"),
    |             style:"«@style»",
    |             value:«$literal»
    |         }`if "position()!=last()" > ,`
    }
    |     ],
}