import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot } from "../ignite-html/ignite-template.js";

class DropdownMenu extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            button: null,
            buttonClass: "btn btn-simple",
            placement: "right",
            minWidth: null
        };
    }

    get styles() {
        return `
            .btn-simple {
                border: none;
                background-color: transparent;
            }
        `;
    }

    render() {
        return this.template.child(
            new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
            new ul()
                .class("dropdown-menu")
                .class(this.placement, (value) => { return `dropdown-menu-${value}`; })
                .style("min-width", this.minWidth, "important", (value) => { return value ? value : "unset"; })
                .child(
                    new slot(this)
                )
        );
    }
}

class DropdownMenuTemplate extends IgniteTemplate {
    constructor(...children) {
        super("bt-dropdown-menu", children);
    }
}

customElements.define("bt-dropdown-menu", DropdownMenu);

export {
    DropdownMenuTemplate as DropdownMenu
};