import { clearScreenRect } from "./clear-rect";
import type { ScreenRect, WebGlRendererContext } from "./types";

const darkChecker = [0.82, 0.82, 0.86, 1] as const;
const lightChecker = [0.94, 0.94, 0.97, 1] as const;

export function renderCheckerboard(context: WebGlRendererContext, rect: ScreenRect, squareSize: number) {
  const clampedSquareSize = Math.max(1, squareSize);
  const canvasWidth = context.canvas.width;
  const canvasHeight = context.canvas.height;

  for (let py = rect.y; py < rect.y + rect.h; py += clampedSquareSize) {
    for (let px = rect.x; px < rect.x + rect.w; px += clampedSquareSize) {
      const x = Math.max(0, px);
      const y = Math.max(0, py);
      const w = Math.min(px + clampedSquareSize, rect.x + rect.w, canvasWidth) - x;
      const h = Math.min(py + clampedSquareSize, rect.y + rect.h, canvasHeight) - y;
      if (w <= 0 || h <= 0) continue;

      const checker =
        (Math.floor((px - rect.x) / clampedSquareSize) + Math.floor((py - rect.y) / clampedSquareSize)) % 2 === 0;

      clearScreenRect(context, { x, y, w, h }, checker ? darkChecker : lightChecker);
    }
  }
}