import h, { type CreateElement } from "../../html";
import cellAtCoord from "./cellAtCoord";
import drawGrid from "./drawGrid";
import "./index.css";

class NotiveGridElement extends HTMLElement {
  #gridId!: string;

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

  set gridId(val: string) {
    this.#gridId = val;
    this.setAttribute("grid-id", val);
  }

  get renderedGrid() {
    return window.notive.getGrid(this.#gridId)!;
  }

  canvasEl: HTMLCanvasElement = h.canvas();

  connectedCallback() {
    if (!this.gridId) {
      throw new Error("ntv-grid requries gridId attribute");
    }

    this.canvasEl.addEventListener("mousedown", (event) => {
      const clientRect = this.canvasEl.getBoundingClientRect();
      const x = event.x - clientRect.x;
      const y = event.y - clientRect.y;
      const cellRef = cellAtCoord(this.renderedGrid, x, y);
      if (!cellRef) return;
      window.notive.selectCell(this.#gridId, cellRef);
    });

    window.addEventListener("ntv:selection-changed", () => {
      this.draw();
    });

    this.append(this.canvasEl);
    this.draw();
  }

  draw() {
    const ctx = this.canvasEl.getContext("2d");

    if (!ctx) throw new Error("Unable to get canvas context");

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

    if (!grid) return;

    this.canvasEl.setAttribute("width", grid.rect.width + "px");
    this.canvasEl.setAttribute("height", grid.rect.height + "px");

    drawGrid(
      ctx,
      grid,
      window.notive.selection,
      window.notive.pendingSelection,
    );
  }
}

customElements.define("ntv-grid", NotiveGridElement);

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