import Ratio from "./math/Ratio";
import { Cell, CellRef, Doc, Grid } from "./types";
import { ActiveCellSelection, PendingSelection, Selection } from "./selection";
import renderGrid, { RenderedGrid } from "./components/grid/renderGrid";

function defaultDoc(): Doc {
  const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
    widthRatio: new Ratio(1, 16),
  }));

  return {
    grids: [
      {
        id: window.crypto.randomUUID(),
        baseCellSize: 48,
        baseCellWidthRatio: new Ratio(1, 16),
        parts: [
          {
            rows: Array.from({ length: 4 }, () => ({
              cells: [...defaultCells],
            })),
          },
        ],
      },
      {
        id: window.crypto.randomUUID(),
        baseCellSize: 48,
        baseCellWidthRatio: new Ratio(1, 16),
        parts: [
          {
            rows: Array.from({ length: 4 }, () => ({
              cells: [...defaultCells],
            })),
          },
        ],
      },
    ],
  };
}

export default class Notive {
  doc: Doc = defaultDoc();

  gridsById = Object.fromEntries(
    this.doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
  );

  selection?: Selection;

  pendingSelection?: Selection;

  getGrid(id: string): RenderedGrid | undefined {
    return this.gridsById[id];
  }

  selectCell(gridId: string, cellRef: CellRef) {
    const previousSelection = this.selection;
    this.selection = new ActiveCellSelection(gridId, cellRef);

    window.dispatchEvent(
      new CustomEvent("ntv:selection-changed", {
        detail: { selection: this.selection, previousSelection },
      }),
    );
  }
}

window.notive = new Notive();