import h, { CreateElement } from "../../html";
import "./index.css";

class NotiveToolbarElement extends HTMLElement {
  connectedCallback() {
    this.append(
      h.section(
        h.button({ dataset: { variant: "menu" } }, "File"),
        h.button({ dataset: { variant: "menu" } }, "Edit"),
        h.button({ dataset: { variant: "menu" } }, "Format"),
      ),
      h.section(
        h.button({ dataset: { variant: "icon" } }, "-"),
        h.input({ type: "text", value: "1" }),
        h.button({ dataset: { variant: "icon" } }, "+"),
      ),
    );
  }
}

customElements.define("ntv-toolbar", NotiveToolbarElement);

export default ((...args: any[]): NotiveToolbarElement =>
  (h as any)["ntv-toolbar"](...args)) as CreateElement<NotiveToolbarElement>;