import { IEditableAttribute } from "../../core/EditableAttributes.js";
import { isInsideHtmlEditor } from "../../core/HtmlEditor.js";
import TemplateControl from "../../core/TemplateControl.js";
import { XNode } from "../../core/XNode.js";

export default class FlipBox extends TemplateControl {

    static observedAttributes = ["first-visible"];

    get editableAttributes(): IEditableAttribute[] {
        return [
            { name: "first-visible", type: "boolean" }
        ];
    }
    
    root: ShadowRoot;

    container: HTMLElement;

    i = 0;

    async prepare() {
        // do nothing
        const root = this.root = this.attachShadow({ mode:"open", delegatesFocus: true, slotAssignment: "manual" });
        XNode.append(root, <div part="root">
            <div part="container"></div>
            <div part="toggle" title="Toggle" event-click={ () => this.container.part.toggle("hover") }>
            </div>
        </div>);

        this.container = root.querySelector(`[part="container"]`);

        this.addEventListener("click", () => {
            if (isInsideHtmlEditor(this)) {
                return;
            }
            this.container.part.toggle("hover");
        });
    }
    onChildAdded(child: HTMLElement) {
        // do nothing
        const name = `child-${++this.i}`;
        const slot = XNode.append(this.container, <slot part={name} name={name} />) as HTMLSlotElement;
        slot.assign(child);
    }
    onChildRemoved(child: HTMLElement) {
        // do nothing
        child.assignedSlot?.remove();
    }

    makeChildVisible(child: HTMLElement) {
        if (this.children[0] === child) {
            this.container.part.remove("hover");
        } else {
            this.container.part.add("hover");
        }
    }

}

customElements.define("flip-box", FlipBox);