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

import { useRef, useState } from "react";

import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
import CameraSettings from "./CameraSettings/CameraSettings";
import type { PaintedCell, Region } from "../../../types/types";
import PlatePatch from "./PlatePatch/PlatePatch";

const CameraGrid = () => {
  const [regions, setRegions] = useState<Region[]>([
    { name: "Region 1", brushColour: "#ff0000" },
    { name: "Region 2", brushColour: "#00ff00" },
    { name: "Region 3", brushColour: "#0400ff" },
  ]);
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
  const [mode, setMode] = useState("");
  const [tabIndex, setTabIndex] = useState(0);

  const updateRegionColour = (index: number, newColour: string) => {
    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
  };

  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());

  return (
    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
      <VideoFeedGridPainter
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
        mode={mode}
        paintedCells={paintedCellsRef}
      />
      <CameraSettings
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
        onSelectRegion={setSelectedRegionIndex}
        onChangeRegionColour={updateRegionColour}
        mode={mode}
        onSelectMode={setMode}
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
        paintedCells={paintedCellsRef}
        onAddRegion={() => {
          setRegions((prev) => [...prev, { name: `Region ${prev.length + 1}`, brushColour: "#ffffff" }]);
        }}
        OnRemoveRegion={() => {
          setRegions((prev) => prev.filter((_, i) => i !== selectedRegionIndex));
          setSelectedRegionIndex((prev) => (prev > 0 ? prev - 1 : 0));
        }}
      />
      <PlatePatch />
    </div>
  );
};

export default CameraGrid;