BayIQ-UI/src/features/cameras/components/VideoFeedGridPainter.tsx

import { useRef, type RefObject } from "react";
import { Stage, Layer, Image, Shape } from "react-konva";
import type { KonvaEventObject } from "konva/lib/Node";
import { useCreateVideoSnapshot } from "../hooks/useGetvideoSnapshots";
import Card from "../../../ui/Card";
import type { Region } from "../../../types/types";

const rows = 40;
const cols = 40;
const size = 20;
const gap = 0;

type VideoFeedGridPainterProps = {
  regions: Region[];
  selectedRegionIndex: number;
};

const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPainterProps) => {
  const { latestBitmapRef } = useCreateVideoSnapshot();

  const isDrawingRef = useRef(false);
  const paintedCellsRef = useRef<Set<string>>(new Set());

  const paintLayerRef = useRef<any>(null);

  const draw = (bmp: RefObject<ImageBitmap | null>) => {
    if (!bmp || !bmp.current) return null;
    return bmp.current;
  };

  const paintCell = (x: number, y: number) => {
    const col = Math.floor(x / (size + gap));
    const row = Math.floor(y / (size + gap));

    if (row < 0 || row >= rows || col < 0 || col >= cols) return;

    const key = `${row}-${col}`;
    const set = paintedCellsRef.current;
    if (set.has(key)) return;

    set.add(key);

    paintLayerRef.current?.batchDraw();
  };

  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
    if (!selectedRegionIndex) return;
    isDrawingRef.current = true;
    const pos = e.target.getStage()?.getPointerPosition();
    if (pos) paintCell(pos.x, pos.y);
  };

  const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
    if (!isDrawingRef.current) return;
    if (!selectedRegionIndex) return;
    const pos = e.target.getStage()?.getPointerPosition();
    if (pos) paintCell(pos.x, pos.y);
  };

  const handleStageMouseUp = () => {
    isDrawingRef.current = false;
  };

  return (
    <Card className="w-187.5 place-self-start">
      <Stage
        width={740}
        height={460}
        onMouseDown={handleStageMouseDown}
        onMouseMove={handleStageMouseMove}
        onMouseUp={handleStageMouseUp}
        onMouseLeave={handleStageMouseUp}
      >
        <Layer>
          <Image image={draw(latestBitmapRef)} width={740} height={460} />
        </Layer>

        <Layer ref={paintLayerRef} opacity={0.6}>
          <Shape
            sceneFunc={(ctx, shape) => {
              const cells = paintedCellsRef.current;
              cells.forEach((key) => {
                const [rowStr, colStr] = key.split("-");
                const row = Number(rowStr);
                const col = Number(colStr);

                const x = col * (size + gap);
                const y = row * (size + gap);

                ctx.beginPath();
                ctx.rect(x, y, size, size);
                ctx.fillStyle = regions[selectedRegionIndex]?.brushColour;
                ctx.fill();
              });

              ctx.fillStrokeShape(shape);
            }}
          />
        </Layer>
      </Stage>
    </Card>
  );
};

export default VideoFeedGridPainter;