import { neo__ } from "./_global--translation.js";



export default class NeoDropdownButton extends HTMLElement {
    static get observedAttributes() { return ["button-text", "disabled", "success", "only-round-corner-top-left"]; }

    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        this._syncSelectOptions    = this._syncSelectOptions.bind(this);
        this._syncPendingSelection = this._syncPendingSelection.bind(this);
        this._onButtonClick        = this._onButtonClick.bind(this);
        this.shadowRoot.innerHTML = `
            <style>
                :host                       { display: flex; align-items: stretch; font-size: 14px; }
                select, button              { border: 1px solid #C0C0C0; font-size: 1em; }
                select                      { border-radius: 10px 0 0 10px; padding: 0.8em 0.0em 0.8em 0.8em; }
                button                      { border-radius: 0 10px 10px 0; padding: 0.8em 1.0em 0.8em 1.0em; }
                :host([only-round-corner-top-left]) select { border-radius: 10px 0 0 0; }
                :host([only-round-corner-top-left]) button { border-radius: 0; }
                button                      { margin-left: -1px; }
                select                      { max-width: calc(100vw - 140px); }
                button                      { background-color: var(--wp-admin-theme-color, #2271b1); color: white; cursor: pointer; }
                button:not(:disabled):hover { filter: brightness(110%); }
                button:not(:disabled)       { border-color: var(--wp-admin-theme-color, #2271b1); }
                button:disabled             { color: #a7aaad; background-color: #f6f7f7; cursor: default; }
                button .button-text-success { display: none; }
                :host([success]) button     { background-color: darkgreen; }
                :host([success]) button     { .button-text { display: none; } .button-text-success { display: inline; } }
            </style>
            <select></select>
            <slot style="display:none;"></slot>
            <button><span class="button-text">OK</span><span class="button-text-success">${neo__("Done", "Fertig")}</span></button>
        `;
        this._select = this.shadowRoot.querySelector("select");
        this._button = this.shadowRoot.querySelector("button");
        this._slot   = this.shadowRoot.querySelector("slot");
    }

    connectedCallback() {
        this._slot.addEventListener("slotchange", this._syncSelectOptions);
        this._select.addEventListener("change", this._syncPendingSelection);
        this._button.addEventListener("click", this._onButtonClick);
        this._syncSelectOptions();
        this._syncButtonText();
        this._syncDisabledState();
    }

    disconnectedCallback() {
        this._slot.removeEventListener("slotchange", this._syncSelectOptions);
        this._select.removeEventListener("change", this._syncPendingSelection);
        this._button.removeEventListener("click", this._onButtonClick);
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === "button-text") { this._syncButtonText(); }
        if (name === "disabled") { this._syncDisabledState(); }
    }

    get disabled()        { return this.hasAttribute("disabled"); }          set disabled(isDisabled) { this.toggleAttribute("disabled", isDisabled); }
    get buttonText()      { return this.getAttribute("button-text") ?? ""; } set buttonText(buttonText) { this.setAttribute("button-text", buttonText ?? ""); }
    get value()           { return this._select?.value ?? ""; }              set value(newValue) { this._select.value = newValue ?? ""; this._syncLightDomSelection(); this._syncDisabledState(); }
    get selectedOptions() { return this._select?.selectedOptions ?? []; }

    _syncPendingSelection(event) {
        event.stopPropagation();
        this._syncLightDomSelection();
        this._syncDisabledState();
    }

    _onButtonClick(event) {
        event.stopPropagation();
        if (this._button.disabled) { return; }
        this.dispatchEvent(new Event("change", { bubbles: true }));
    }

    _syncSelectOptions() {
        this._select.replaceChildren(...this._slot.assignedElements({ flatten: true }).map(node => node.cloneNode(true)));
        if ([...this._select.options].some(optionNode => optionNode.value === this._select.value)) { this._select.value = this._select.value; } else { this._select.value = ""; }
        this._syncLightDomSelection();
        this._syncDisabledState();
    }

    _syncLightDomSelection() {
        const updateOptionSelected = (node) => {
            if (node.tagName === "OPTGROUP") { [...node.querySelectorAll("option")].forEach(optionNode => updateOptionSelected(optionNode)); }
            if (node.tagName === "OPTION") { node.toggleAttribute("selected", node.value === this._select.value); }
        };
        this._slot.assignedElements({ flatten: true }).forEach(node => updateOptionSelected(node));
    }

    _syncButtonText() {
        this._button.querySelector(".button-text").textContent = this.buttonText;
    }

    _syncDisabledState() {
        this._select.disabled = this.disabled;
        this._button.disabled = this.disabled || !this.value;
    }
}
