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:selectionchange", () => {
      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();
    });

    this.#subdivisionsInputEl.addEventListener("change", () => {
      window.notive.subdivideSelection(
        parseInt(this.#subdivisionsInputEl.value),
      );
    });
  }

  #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" },
            onclick: () => {
              const subdivisions = Math.max(
                1,
                parseInt(this.#subdivisionsInputEl.value) - 1,
              );

              this.#subdivisionsInputEl.value = subdivisions.toString();
              window.notive.subdivideSelection(subdivisions);
            },
          },
          "-",
        ),
        this.#subdivisionsInputEl,
        h.button(
          {
            dataset: { variant: "icon" },

            onclick: () => {
              const subdivisions =
                parseInt(this.#subdivisionsInputEl.value) + 1;

              this.#subdivisionsInputEl.value = subdivisions.toString();
              window.notive.subdivideSelection(subdivisions);
            },
          },
          "+",
        ),
      ),
    );
  }
}

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

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