/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <input type="checkbox" id="selection" tabindex="-1">
    <emc-searchinput id="search"></emc-searchinput>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        padding: 3px;
        background: var(--list-color-border, #f1f1f1);
    }
    :host(:focus) {
        outline: none;
    }
    :focus {
        box-shadow: none;
        outline: none;
    }
    #search {
        background: var(--list-color-back, #ffffff);
        border: none;
        border-radius: 0;
    }
    #search:focus {
        box-shadow: 0 0 2px 2px var(--input-focus-color, #06b5ff);
        outline: none;
    }
    #search:focus:not(:focus-visible)  {
        box-shadow: none;
        outline: none;
    }
    #selection {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
        cursor: pointer;
        -webkit-appearance: none;
        outline: none;
    }
    #selection::before {
        font-size: 18px;
        content: "☐";
    }
    #selection:indeterminate::before {
        content: "⮽";
    }
    #selection:checked::before {
        content: "☑";
    }
    :host(:not([multiple])) #selection,
    :host([multiple="false"]) #selection {
        opacity: 0.1;
        pointer-events: none;
    }
    
`);

/* ======================================================================= */

import CustomElementDelegating from "../element/CustomElementDelegating.js";
import "../input/SearchField.js";
import "../i18n/I18nTooltip.js";

export default class SelectionHeader extends CustomElementDelegating {

    #selectionEl;

    #searchEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#selectionEl = this.shadowRoot.getElementById("selection");
        this.#selectionEl.addEventListener("change", (ev) => {
            this.checked = ev.currentTarget.checked;
            const event = new Event("check");
            event.value = ev.currentTarget.checked;
            this.dispatchEvent(event);
        });
        this.#searchEl = this.shadowRoot.getElementById("search");
        this.#searchEl.addEventListener("change", (ev) => {
            this.search = ev.currentTarget.value;
            const event = new Event("search");
            event.value = ev.currentTarget.value;
            this.dispatchEvent(event);
        });
    }

    get checked() {
        return this.getAttribute("checked");
    }

    set checked(val) {
        this.setAttribute("checked", val);
    }

    get search() {
        return this.getAttribute("search");
    }

    set search(val) {
        this.setAttribute("search", val);
    }

    get multiple() {
        return this.getAttribute("multiple") == "true";
    }

    set multiple(val) {
        this.setAttribute("multiple", val);
    }

    static get observedAttributes() {
        return ["checked", "search"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            switch (name) {
                case "checked": {
                    if (newValue == "mixed") {
                        this.#selectionEl.checked = true;
                        this.#selectionEl.indeterminate = true;
                    } else {
                        this.#selectionEl.checked = newValue != "false";
                        this.#selectionEl.indeterminate = false;
                    }
                } break;
                case "search": {
                    this.#searchEl.value = newValue;
                } break;
            }
        }
    }

}

customElements.define("emc-header-selection", SelectionHeader);
