import h, { CreateElement } from "../../html";
import { ActiveCellSelection, RangeSelection } from "../../selection";
import { RenderedGrid } from "../grid/renderGrid";
import "./index.css";

function getSelectedSubdivisionsCount(): number | undefined {
  const selection = window.notive.selection;

  if (!selection) return;

  if (selection instanceof ActiveCellSelection) {
    return 1;
  }

  if (!(selection instanceof RangeSelection)) return;

  const grid = window.notive.getGrid(selection.gridId);

  if (!grid) return;

  const selectedCells = selection.getSelectedCells(grid);

  return Math.min(...selectedCells.map((cells) => cells.length));
}

class NotiveToolbarElement extends HTMLElement {
  #subdivisionsInputEl: HTMLInputElement = h.input({
    title: "Subdivisions",
    placeholder: "-",
    disabled: true,
  });

  connectedCallback() {
    this.#render();

    window.addEventListener("ntv:selection-changed", () => {
      if (window.notive.pendingSelection) {
        this.#subdivisionsInputEl.disabled = true;
        this.#subdivisionsInputEl.value = "";
        return;
      }

      const subdivisionsCount = getSelectedSubdivisionsCount();

      if (!subdivisionsCount) {
        this.#subdivisionsInputEl.disabled = true;
        this.#subdivisionsInputEl.value = "";
        return;
      }

      this.#subdivisionsInputEl.disabled = false;
      this.#subdivisionsInputEl.value = subdivisionsCount.toString();
    });
  }

  #render() {
    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" } }, "-"),
        this.#subdivisionsInputEl,
        h.button({ dataset: { variant: "icon" } }, "+"),
      ),
    );
  }
}

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

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