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

export default class MenuBar extends HtmlControl {

    get editableAttributes(): IEditableAttribute[] {
        return [
            { name: "hide-underline", type: "boolean"},
            { name: "styler-popup-color", type: "string", value: "" },
            { name: "styler-popup-text-color", type: "string", value: "" },
        ];
    }

    async prepare() {

        if (isInsideHtmlEditor(this)) {
            return;
        }

        await ComponentHelper.waitForReady();

        const nav = document.createElement("nav");
        for(const child of Array.from(this.children)) {
            child.remove();
            nav.appendChild(child);
        }

        XNode.render(this, <div>
            <input type="checkbox"/>
            <div class="image-div"/>
        </div>);
        this.appendChild(nav);


    }
}

customElements.define("menu-bar", MenuBar);