import h, { type CreateElement } from "../../html";
import renderGrid from "./renderGrid";
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);
  }

  canvasEl: HTMLCanvasElement = h.canvas();

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

    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;
    const renderedGrid = renderGrid(grid);
    this.canvasEl.setAttribute("width", renderedGrid.rect.width + "px");
    this.canvasEl.setAttribute("height", renderedGrid.rect.height + "px");
    drawGrid(ctx, renderedGrid);
  }
}

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

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