import { Color, Grid } from "@snk/types/grid";
import { drawLerpWorld, drawWorld } from "@snk/draw/drawWorld";
import { Snake } from "@snk/types/snake";

export const drawOptions = {
  sizeBorderRadius: 2,
  sizeCell: 16,
  sizeDot: 12,
  colorBorder: "#1b1f230a",
  colorDots: {
    1: "#9be9a8",
    2: "#40c463",
    3: "#30a14e",
    4: "#216e39",
  },
  colorEmpty: "#ebedf0",
  colorSnake: "purple",
  dark: {
    colorEmpty: "#161b22",
    colorDots: { 1: "#01311f", 2: "#034525", 3: "#0f6d31", 4: "#00c647" },
  },
};

const getPointedCell =
  (canvas: HTMLCanvasElement) =>
  ({ pageX, pageY }: MouseEvent) => {
    const { left, top } = canvas.getBoundingClientRect();

    const x = Math.floor((pageX - left) / drawOptions.sizeCell) - 1;
    const y = Math.floor((pageY - top) / drawOptions.sizeCell) - 2;

    return { x, y };
  };

export const createCanvas = ({
  width,
  height,
}: {
  width: number;
  height: number;
}) => {
  const canvas = document.createElement("canvas");
  const upscale = 2;
  const w = drawOptions.sizeCell * (width + 4);
  const h = drawOptions.sizeCell * (height + 4) + 200;
  canvas.width = w * upscale;
  canvas.height = h * upscale;
  canvas.style.width = w + "px";
  canvas.style.height = h + "px";
  canvas.style.display = "block";
  // canvas.style.pointerEvents = "none";

  const cellInfo = document.createElement("div");
  cellInfo.style.height = "20px";

  document.body.appendChild(cellInfo);
  document.body.appendChild(canvas);
  canvas.addEventListener("mousemove", (e) => {
    const { x, y } = getPointedCell(canvas)(e);
    cellInfo.innerText = [x, y]
      .map((u) => u.toString().padStart(2, " "))
      .join(" / ");
  });

  const ctx = canvas.getContext("2d")!;
  ctx.scale(upscale, upscale);

  const draw = (grid: Grid, snake: Snake, stack: Color[]) => {
    ctx.clearRect(0, 0, 9999, 9999);
    drawWorld(ctx, grid, snake, stack, drawOptions);
  };

  const drawLerp = (
    grid: Grid,
    snake0: Snake,
    snake1: Snake,
    stack: Color[],
    k: number
  ) => {
    ctx.clearRect(0, 0, 9999, 9999);
    drawLerpWorld(ctx, grid, snake0, snake1, stack, k, drawOptions);
  };

  const highlightCell = (x: number, y: number, color = "orange") => {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.fillRect((1 + x + 0.5) * 16 - 2, (2 + y + 0.5) * 16 - 2, 4, 4);
  };

  return {
    draw,
    drawLerp,
    highlightCell,
    canvas,
    getPointedCell: getPointedCell(canvas),
    ctx,
  };
};