import "./menu";
import { createCanvas } from "./canvas";
import { createSnakeFromCells, snakeToCells } from "@snk/types/snake";
import { grid, snake } from "./sample";
import { getPathToPose } from "@snk/solver/getPathToPose";

const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
canvas.style.pointerEvents = "auto";

const target = createSnakeFromCells(
  snakeToCells(snake).map((p) => ({ ...p, x: p.x - 1 }))
);

let chain = [snake, ...getPathToPose(snake, target)!];

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

  draw(grid, chain[i], []);
  chain
    .map(snakeToCells)
    .flat()
    .forEach(({ x, y }) => highlightCell(x, y));
};

onChange();

const inputI = document.createElement("input") as any;
inputI.type = "range";
inputI.value = 0;
inputI.max = chain ? chain.length - 1 : 0;
inputI.step = 1;
inputI.min = 0;
inputI.style.width = "90%";
inputI.style.padding = "20px 0";
inputI.addEventListener("input", () => {
  i = +inputI.value;
  onChange();
});
document.body.append(inputI);