import "./menu";
import { createCanvas } from "./canvas";
import { grid } from "./sample";
import type { Color } from "@snk/types/grid";
import { createOutside, isOutside } from "@snk/solver/outside";

const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
document.body.appendChild(canvas);

let k = 0;

const onChange = () => {
  ctx.clearRect(0, 0, 9999, 9999);

  draw(grid, [] as any, []);

  const outside = createOutside(grid, k as Color);

  for (let x = outside.width; x--; )
    for (let y = outside.height; y--; )
      if (isOutside(outside, x, y)) highlightCell(x, y);
};

onChange();

const inputK = document.createElement("input") as any;
inputK.type = "range";
inputK.value = 0;
inputK.step = 1;
inputK.min = 0;
inputK.max = 4;
inputK.style.width = "90%";
inputK.style.padding = "20px 0";
inputK.addEventListener("input", () => {
  k = +inputK.value;
  onChange();
});
document.body.append(inputK);
window.addEventListener("click", (e) => {
  if (e.target === document.body || e.target === document.body.parentElement)
    inputK.focus();
});