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

export class NotiveAppElement extends HTMLElement {
  doc: Doc = defaultDoc();
  #selection?: Selection;

  get selection() {
    return this.#selection;
  }

  set selection(selection: Selection | undefined) {
    this.#selection = selection;
    this.#updateGridSelections();
  }

  #updateGridSelections() {
    this.querySelectorAll<NotiveGridElement>("ntv-grid").forEach((grid) => {
      grid.selection =
        this.#selection?.gridId === 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.selection = event.selection;
          },
        }),
      ),
    );
  }
}

customElements.define("ntv-app", NotiveAppElement);