// widget_dropdown.ysl2

template "widget[@type='DropDown']", mode="widget_class"{
||
    function numb_event(e) {
        e.stopPropagation();
    }
    class DropDownWidget extends Widget{
        dispatch(value) {
            if(!this.opened) this.set_selection(value);
        }
        init() {
            this.button_elt.onclick = this.on_button_click.bind(this);
            // Save original size of rectangle
            this.box_bbox = this.box_elt.getBBox()
            this.highlight_bbox = this.highlight_elt.getBBox()
            this.highlight_elt.style.visibility = "hidden";

            // Compute margins
            this.text_bbox = this.text_elt.getBBox();
            let lmargin = this.text_bbox.x - this.box_bbox.x;
            let tmargin = this.text_bbox.y - this.box_bbox.y;
            this.margins = [lmargin, tmargin].map(x => Math.max(x,0));

            // Index of first visible element in the menu, when opened
            this.menu_offset = 0;

            // How mutch to lift the menu vertically so that it does not cross bottom border
            this.lift = 0;

            // Event handlers cannot be object method ('this' is unknown)
            // as a workaround, handler given to addEventListener is bound in advance.
            this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
            this.bound_on_selection_click = this.on_selection_click.bind(this);
            this.bound_on_backward_click = this.on_backward_click.bind(this);
            this.bound_on_forward_click = this.on_forward_click.bind(this);
            this.opened = false;
            this.clickables = [];
        }
        on_button_click() {
            this.open();
        }
        // Called when a menu entry is clicked
        on_selection_click(selection) {
            this.close();
            this.apply_hmi_value(0, selection);
        }
        on_backward_click(){
            this.scroll(false);
        }
        on_forward_click(){
            this.scroll(true);
        }
        set_selection(value) {
            let display_str;
            if(value >= 0 && value < this.content.length){
                // if valid selection resolve content
                display_str = this.content[value];
                this.last_selection = value;
            } else {
                // otherwise show problem
                display_str = "?"+String(value)+"?";
            }
            // It is assumed that first span always stays,
            // and contains selection when menu is closed
            this.text_elt.firstElementChild.textContent = display_str;
        }
        grow_text(up_to) {
            let count = 1;
            let txt = this.text_elt;
            let first = txt.firstElementChild;
            // Real world (pixels) boundaries of current page
            let bounds = svg_root.getBoundingClientRect();
            this.lift = 0;
            while(count < up_to) {
                let next = first.cloneNode();
                // relative line by line text flow instead of absolute y coordinate
                next.removeAttribute("y");
                next.setAttribute("dy", "1.1em");
                // default content to allow computing text element bbox
                next.textContent = "...";
                // append new span to text element
                txt.appendChild(next);
                // now check if text extended by one row fits to page
                // FIXME : exclude margins to be more accurate on box size
                let rect = txt.getBoundingClientRect();
                if(rect.bottom > bounds.bottom){
                    // in case of overflow at the bottom, lift up one row
                    let backup = first.getAttribute("dy");
                    // apply lift as a dy added too first span (y attrib stays)
                    first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
                    rect = txt.getBoundingClientRect();
                    if(rect.top > bounds.top){
                        this.lift += 1;
                    } else {
                        // if it goes over the top, then backtrack
                        // restore dy attribute on first span
                        if(backup)
                            first.setAttribute("dy", backup);
                        else
                            first.removeAttribute("dy");
                        // remove unwanted child
                        txt.removeChild(next);
                        return count;
                    }
                }
                count++;
            }
            return count;
        }
        close_on_click_elsewhere(e) {
            // inhibit events not targetting spans (menu items)
            if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){
                e.stopPropagation();
                // close menu in case click is outside box
                if(e.target !== this.box_elt)
                    this.close();
            }
        }
        close(){
            // Stop hogging all click events
            svg_root.removeEventListener("pointerdown", numb_event, true);
            svg_root.removeEventListener("pointerup", numb_event, true);
            svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
            // Restore position and sixe of widget elements
            this.reset_text();
            this.reset_clickables();
            this.reset_box();
            this.reset_highlight();
            // Put the button back in place
            this.element.appendChild(this.button_elt);
            // Mark as closed (to allow dispatch)
            this.opened = false;
            // Dispatch last cached value
            this.apply_cache();
        }
        // Make item (text span) clickable by overlaying a rectangle on top of it
        make_clickable(span, func) {
            let txt = this.text_elt;
            let original_text_y = this.text_bbox.y;
            let highlight = this.highlight_elt;
            let original_h_y = this.highlight_bbox.y;
            let clickable = highlight.cloneNode();
            let yoffset = span.getBBox().y - original_text_y;
            clickable.y.baseVal.value = original_h_y + yoffset;
            clickable.style.pointerEvents = "bounding-box";
            //clickable.style.visibility = "hidden";
            //clickable.onclick = () => alert("love JS");
            clickable.onclick = func;
            this.element.appendChild(clickable);
            this.clickables.push(clickable)
        }
        reset_clickables() {
            while(this.clickables.length){
                this.element.removeChild(this.clickables.pop());
            }
        }
        // Set text content when content is smaller than menu (no scrolling)
        set_complete_text(){
            let spans = this.text_elt.children;
            let c = 0;
            for(let item of this.content){
                let span=spans[c];
                span.textContent = item;
                let sel = c;
                this.make_clickable(span, (evt) => this.bound_on_selection_click(sel));
                c++;
            }
        }
        // Move partial view :
        // false : upward, lower value
        // true  : downward, higher value
        scroll(forward){
            let contentlength = this.content.length;
            let spans = this.text_elt.children;
            let spanslength = spans.length;
            // reduce accounted menu size according to prsence of scroll buttons
            // since we scroll there is necessarly one button
            spanslength--;
            if(forward){
                // reduce accounted menu size because of back button
                // in current view
                if(this.menu_offset > 0) spanslength--;
                this.menu_offset = Math.min(
                    contentlength - spans.length + 1,
                    this.menu_offset + spanslength);
            }else{
                // reduce accounted menu size because of back button
                // in view once scrolled
                if(this.menu_offset - spanslength > 0) spanslength--;
                this.menu_offset = Math.max(
                    0,
                    this.menu_offset - spanslength);
            }
            if(this.menu_offset == 1)
                this.menu_offset = 0;

            this.reset_highlight();

            this.reset_clickables();
            this.set_partial_text();

            this.highlight_selection();
        }
        // Setup partial view text content
        // with jumps at first and last entry when appropriate
        set_partial_text(){
            let spans = this.text_elt.children;
            let contentlength = this.content.length;
            let spanslength = spans.length;
            let i = this.menu_offset, c = 0;
            let m = this.box_bbox;
            while(c < spanslength){
                let span=spans[c];
                let onclickfunc;
                // backward jump only present if not exactly at start
                if(c == 0 && i != 0){
                    span.textContent = "▲";
                    onclickfunc = this.bound_on_backward_click;
                    let o = span.getBBox();
                    span.setAttribute("dx", (m.width - o.width)/2);
                // presence of forward jump when not right at the end
                }else if(c == spanslength-1 && i < contentlength - 1){
                    span.textContent = "▼";
                    onclickfunc = this.bound_on_forward_click;
                    let o = span.getBBox();
                    span.setAttribute("dx", (m.width - o.width)/2);
                // otherwise normal content
                }else{
                    span.textContent = this.content[i];
                    let sel = i;
                    onclickfunc = (evt) => this.bound_on_selection_click(sel);
                    span.removeAttribute("dx");
                    i++;
                }
                this.make_clickable(span, onclickfunc);
                c++;
            }
        }
        open(){
            let length = this.content.length;
            // systematically reset text, to strip eventual whitespace spans
            this.reset_text();
            // grow as much as needed or possible
            let slots = this.grow_text(length);
            // Depending on final size
            if(slots == length) {
                // show all at once
                this.set_complete_text();
            } else {
                // eventualy align menu to current selection, compensating for lift
                let offset = this.last_selection - this.lift;
                if(offset > 0)
                    this.menu_offset = Math.min(offset + 1, length - slots + 1);
                else
                    this.menu_offset = 0;
                // show surrounding values
                this.set_partial_text();
            }
            // Now that text size is known, we can set the box around it
            this.adjust_box_to_text();
            // Take button out until menu closed
            this.element.removeChild(this.button_elt);
            // Rise widget to top by moving it to last position among siblings
            this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
            // disable interaction with background
            svg_root.addEventListener("pointerdown", numb_event, true);
            svg_root.addEventListener("pointerup", numb_event, true);
            svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
            this.highlight_selection();

            // mark as open
            this.opened = true;
        }
        // Put text element in normalized state
        reset_text(){
            let txt = this.text_elt;
            let first = txt.firstElementChild;
            // remove attribute eventually added to first text line while opening
            first.onclick = null;
            first.removeAttribute("dy");
            first.removeAttribute("dx");
            // keep only the first line of text
            for(let span of Array.from(txt.children).slice(1)){
                txt.removeChild(span)
            }
        }
        // Put rectangle element in saved original state
        reset_box(){
            let m = this.box_bbox;
            let b = this.box_elt;
            b.x.baseVal.value = m.x;
            b.y.baseVal.value = m.y;
            b.width.baseVal.value = m.width;
            b.height.baseVal.value = m.height;
        }
        highlight_selection(){
            if(this.last_selection == undefined) return;
            let highlighted_row = this.last_selection - this.menu_offset;
            if(highlighted_row < 0) return;
            let spans = this.text_elt.children;
            let spanslength = spans.length;
            let contentlength = this.content.length;
            if(this.menu_offset != 0) {
                spanslength--;
                highlighted_row++;
            }
            if(this.menu_offset + spanslength < contentlength - 1) spanslength--;
            if(highlighted_row > spanslength) return;
            let original_text_y = this.text_bbox.y;
            let highlight = this.highlight_elt;
            let span = spans[highlighted_row];
            let yoffset = span.getBBox().y - original_text_y;
            highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;
            highlight.style.visibility = "visible";
        }
        reset_highlight(){
            let highlight = this.highlight_elt;
            highlight.y.baseVal.value = this.highlight_bbox.y;
            highlight.style.visibility = "hidden";
        }
        // Use margin and text size to compute box size
        adjust_box_to_text(){
            let [lmargin, tmargin] = this.margins;
            let m = this.text_elt.getBBox();
            let b = this.box_elt;
            // b.x.baseVal.value = m.x - lmargin;
            b.y.baseVal.value = m.y - tmargin;
            // b.width.baseVal.value = 2 * lmargin + m.width;
            b.height.baseVal.value = 2 * tmargin + m.height;
        }
    }
||
}

template "widget[@type='DropDown']", mode="widget_defs" {
    param "hmi_element";
    labels("text box button highlight");
    // It is assumed that list content conforms to Array interface.
    >   content:
    choose{
        // special case when used for language selection
        when "count(arg) = 1 and arg[1]/@value = '#langs'" {
            > langs
        }
        otherwise {
            > [\n
            foreach "arg" | "«@value»",
            >   ]
        }
    }
    > ,\n
}