/**
 * Custom program dropdown.
 *
 * Replaces the native <select>, whose popup rendered program names
 * unreadably on the Weidmüller HMI's Chromium 119 (the native popup ignores
 * author CSS for option colours and follows the system/GTK theme). This
 * widget is built from plain styled elements, so every colour is under our
 * control and renders identically regardless of browser or OS theme.
 *
 * Visibility is driven purely by the `.open` class on the wrap element (no
 * reliance on the [hidden] attribute), which keeps behaviour predictable on
 * the older Chromium build.
 *
 * Public API mirrors what the rest of the app needs from a select:
 *   init(), setItems([{value,label}]), getValue(), setValue(v),
 *   setDisabled(bool), onChange(cb)
 */
var ProgramDropdown = (function () {
    var root, button, label, list;
    var items = [];      // [{value, label}]
    var value = "";
    var disabled = false;
    var open = false;
    var changeCb = null;

    function init() {
        root = document.getElementById("program-select-wrap");
        button = document.getElementById("program-select");
        label = document.getElementById("program-select-label");
        list = document.getElementById("program-dropdown-list");
        if (!root || !button || !list) return;

        button.addEventListener("click", function () {
            if (disabled) return;
            toggle();
        });

        button.addEventListener("keydown", function (e) {
            if (disabled) return;
            if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                toggle();
            } else if (e.key === "Escape") {
                close();
            }
        });

        // Close when tapping/clicking outside the widget
        document.addEventListener("click", function (e) {
            if (open && !root.contains(e.target)) close();
        });
    }

    function toggle() {
        if (open) { close(); } else { openList(); }
    }

    function openList() {
        if (disabled) return;
        renderList();
        root.classList.add("open");
        button.setAttribute("aria-expanded", "true");
        open = true;
    }

    function close() {
        root.classList.remove("open");
        button.setAttribute("aria-expanded", "false");
        open = false;
    }

    function renderList() {
        list.innerHTML = "";
        for (var i = 0; i < items.length; i++) {
            (function (item) {
                var el = document.createElement("div");
                el.className = "program-dropdown-item" +
                    (item.value === value ? " selected" : "");
                el.textContent = item.label;
                el.setAttribute("role", "option");
                el.addEventListener("click", function () {
                    selectValue(item.value);
                    close();
                });
                list.appendChild(el);
            })(items[i]);
        }
    }

    function selectValue(val) {
        if (val === value) return;
        value = val;
        updateLabel();
        if (changeCb) changeCb(val);
    }

    function updateLabel() {
        var found = null;
        for (var i = 0; i < items.length; i++) {
            if (items[i].value === value) { found = items[i]; break; }
        }
        label.textContent = found ? found.label
            : (items.length ? items[0].label : "");
    }

    function setItems(newItems) {
        items = newItems || [];
        updateLabel();
        if (open) renderList();
    }

    function getValue() {
        return value;
    }

    function setValue(val) {
        value = val || "";
        updateLabel();
        if (open) renderList();
    }

    function setDisabled(d) {
        disabled = !!d;
        if (disabled) {
            button.classList.add("disabled");
            close();
        } else {
            button.classList.remove("disabled");
        }
    }

    function onChange(cb) {
        changeCb = cb;
    }

    return {
        init: init,
        setItems: setItems,
        getValue: getValue,
        setValue: setValue,
        setDisabled: setDisabled,
        onChange: onChange
    };
})();
