import h, { type CreateElement } from "../../html";
import "./index.css";
import colors from "open-color";

class NotiveGridElement extends HTMLElement {
  canvasEl: HTMLCanvasElement = h.canvas();

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

  draw() {
    const ctx = this.canvasEl.getContext("2d");
    if (!ctx) throw new Error("Unable to get canvas context");
    ctx.fillStyle = colors.gray[8];
    ctx.fillRect(0, 0, this.canvasEl.width, this.canvasEl.height);
  }
}

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

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