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

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

const TPL = new Template(`
    <emc-header-search id="header"></emc-header-search>
    <div id="scroll-container">
        <slot id="container">
            <div id="empty">no entries</div>
        </slot>
    </div>
`);

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

const STYLE = new GlobalStyle(`
    :host {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        min-height: 200px;
        user-select: none;
    }
    :focus {
        outline: none;
    }
    #scroll-container {
        flex: 1;
        margin-top: calc(-1 * var(--panel-border-width, 2px));
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--panel-back-color, #ffffff);
        background-image: var(--panel-back-image, none);
        border-style: solid;
        border-width: var(--panel-border-width, 2px);
        border-color: var(--panel-border-color, #000000);
        border-radius: 0px 0px var(--panel-border-radius, 6px) var(--panel-border-radius, 6px);
    }
    slot {
        display: block;
        width: 100%;
    }
    #empty {
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: italic;
        min-height: 30px;
        padding: 5px;
        margin: 5px 2px;
        white-space: normal;
    }
    #header {
        --input-text-color: var(--panel-input-text-color, #000000);
        --input-back-color : var(--panel-input-back-color, #ffffff);
        --form-border-color: var(--panel-border-color, #000000);
        --form-border-width: var(--panel-border-width, 2px);
        --form-border-radius: var(--panel-border-radius, 6px);
    }
    
`);

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

import CustomElement from "./element/CustomElement.js";
import CharacterSearch from "../util/search/CharacterSearch.js";
import {getInnerText} from "../util/helper/ui/ExtractText.js";
import "./header/SearchHeader.js";

export default class FilteredList extends CustomElement {

    #headerEl;

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        this.#headerEl = this.shadowRoot.getElementById("header");
        this.shadowRoot.getElementById("container").addEventListener("slotchange", () => {
            // TODO only check new elements
            // TODO reset removed elements
            // header.search
        });
        /* header */
        this.#headerEl.addEventListener("search", (event) => {
            const all = this.querySelectorAll(":host > :not(emc-collapsepanel), emc-collapsepanel > :not(emc-collapsepanel)");
            const panels = this.querySelectorAll("emc-collapsepanel");
            if (event.value) {
                const regEx = new CharacterSearch(event.value);
                for (const el of all) {
                    const value = el.dataset.filtervalue ?? getInnerText(el);
                    if (regEx.test(value)) {
                        el.style.display = "";
                    } else {
                        el.style.display = "none";
                    }
                }
                for (const el of panels) {
                    const children = el.querySelectorAll(":host :not(emc-collapsepanel)");
                    if (Array.from(children).some((ch) => ch.style.display == "")) {
                        el.style.display = "";
                        continue;
                    }
                    el.style.display = "none";
                }
            } else {
                for (const el of all) {
                    el.style.display = "";
                }
                for (const el of panels) {
                    el.style.display = "";
                }
            }
        });
    }

}

customElements.define("emc-filteredlist", FilteredList);
