import NotiveElement, { customElement, eventHandler } from "../../element";
import h from "../../html";
import { minus16Icon, plus16Icon } from "../icons";
import "./index.css";

export class SubdivisionsChangeEvent extends Event {
  static readonly TYPE = "ntv:toolbar:subdivisionschange";

  constructor(public subdivisions: number | undefined) {
    super(SubdivisionsChangeEvent.TYPE);
  }
}

@customElement("ntv-toolbar")
class NotiveToolbarElement extends NotiveElement {
  #subdivisionsInputEl: HTMLInputElement = h.input({
    title: "Subdivisions",
    disabled: true,
  });

  get subdivisions(): number | undefined {
    if (this.#subdivisionsInputEl.value === "") return;
    return parseInt(this.#subdivisionsInputEl.value);
  }

  set subdivisions(n: number | undefined) {
    const m = n && Math.max(n, 1);
    this.#subdivisionsInputEl.value = m === undefined ? "" : m.toString();
  }

  @eventHandler(SubdivisionsChangeEvent.TYPE)
  onsubdivisionschange?: (event: SubdivisionsChangeEvent) => any;

  connectedCallback() {
    this.append(
      h.section(
        h.button(
          {
            dataset: { icon: "" },
            onclick: () => {
              if (!this.subdivisions) return;
              this.subdivisions = this.subdivisions - 1;
              this.dispatchEvent(
                new SubdivisionsChangeEvent(this.subdivisions),
              );
            },
          },
          h.span(minus16Icon()),
        ),
        this.#subdivisionsInputEl,
        h.button(
          {
            dataset: { icon: "" },
            onclick: () => {
              if (!this.subdivisions) return;
              this.subdivisions = this.subdivisions + 1;
              this.dispatchEvent(
                new SubdivisionsChangeEvent(this.subdivisions),
              );
            },
          },
          h.span(plus16Icon()),
        ),
      ),
      h.section(h.button("Play")),
    );
  }
}

export default NotiveToolbarElement.makeFactory();