import defaultDoc from "../../defaultDoc";
import NotiveElement, { customElement } from "../../element";
import { Doc } from "../../types";
import ntvGrid, { NotiveGridElement } from "../grid";
import renderGrid from "../grid/renderGrid";
import { GridSelection } from "../grid/selection";
import ntvToolbar from "../toolbar";
import "./index.css";

@customElement("ntv-app")
export class NotiveAppElement extends NotiveElement {
  doc: Doc = defaultDoc();

  #selectedGridId?: string;
  #selection?: GridSelection;

  setSelection(gridId: string, selection: GridSelection) {
    this.#selectedGridId = gridId;
    this.#selection = selection;
    this.#updateGridSelections();
  }

  #updateGridSelections() {
    this.querySelectorAll<NotiveGridElement>("ntv-grid").forEach((grid) => {
      grid.selection =
        this.#selectedGridId === grid.grid?.id ? this.#selection : undefined;
    });
  }

  connectedCallback() {
    this.append(
      ntvToolbar(),

      ...this.doc.grids.map((grid) =>
        ntvGrid({
          grid: renderGrid(grid),
          dataset: { gridId: grid.id },
          ongridselectionchange: (event) => {
            this.setSelection(grid.id, event.selection);
          },
          oncellchange: (event) => {
            console.log(event);
          },
        }),
      ),
    );
  }
}

export default NotiveAppElement.makeFactory();