import TemplateControl from "../../core/TemplateControl.js";
import { XNode } from "../../core/XNode.js";


export default class PopupWindow extends TemplateControl {

    static observedAttributes = ["title", "hide-close"];

    root: ShadowRoot;

    titleElement: HTMLElement;
    container: HTMLSlotElement;

    async prepare() {
        const root = this.root = this.attachShadow({ mode: "open", slotAssignment: "manual"});

        XNode.append(root, <section part="root">
            <h3 part="title"></h3>
            <i event-click={() => this.remove()} part="close" class="fas fa-close"/>
            <slot></slot>
        </section>);

        this.container = root.querySelector("slot") as HTMLSlotElement;

        this.titleElement = root.querySelector("h3");
        this.titleElement.textContent = this.getAttribute("title");

    }
    onChildAdded(child: Element) {
        this.container.assign(child);
    }
    onChildRemoved(child: HTMLElement) {
        this.container.assign();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch(name) {
            case "title":
                if (this.titleElement) {
                    this.titleElement.textContent = this.getAttribute("title");
                }
                break;
        }
    }



}

customElements.define("popup-window", PopupWindow);