BayIQ-UI/src/features/cameras/components/CameraSettings/RegionSelector.tsx

import type { ColourData, PaintedCell, Region } from "../../../../types/types";
import ColourPicker from "./ColourPicker";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import { useColourDectection } from "../../hooks/useColourDetection";

type RegionSelectorProps = {
  regions: Region[];
  selectedRegionIndex: number;
  mode: string;
  cameraFeedID: "A" | "B" | "C";
};

const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
  const { colourMutation } = useColourDectection();
  const { state, dispatch } = useCameraFeedContext();
  const paintedCells = state.paintedCells[cameraFeedID];

  const handleChange = (e: { target: { value: string } }) => {
    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
  };

  const handleResetRegion = () => {
    dispatch({
      type: "RESET_PAINTED_CELLS",
      payload: { cameraFeedID: cameraFeedID, paintedCells: new Map<string, PaintedCell>() },
    });
  };

  const handleModeChange = (newMode: string) => {
    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
  };

  const handleRegionSelect = (index: number) => {
    dispatch({ type: "SET_SELECTED_REGION_INDEX", payload: index });
  };

  const handleRegionColourChange = (index: number, newColour: string) => {
    const regionName = regions[index].name;

    dispatch({
      type: "SET_SELECTED_REGION_COLOUR",
      payload: { cameraFeedID: cameraFeedID, regionName: regionName, newColour: newColour },
    });
  };

  const handleSaveclick = () => {
    const regions: ColourData[] = [];
    const test = Array.from(paintedCells.entries());
    const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
    const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
    const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
    const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
    const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
    const region1Data = {
      id: 1,
      cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    const region2Data = {
      id: 2,
      cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    const region3Data = {
      id: 3,
      cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    const region4Data = {
      id: 4,
      cells: region4.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    const region5Data = {
      id: 5,
      cells: region5.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    if (region1Data.cells.length > 0) {
      regions.push(region1Data);
    }
    if (region2Data.cells.length > 0) {
      regions.push(region2Data);
    }
    if (region3Data.cells.length > 0) {
      regions.push(region3Data);
    }
    if (region4Data.cells.length > 0) {
      regions.push(region4Data);
    }
    if (region5Data.cells.length > 0) {
      regions.push(region5Data);
    }

    colourMutation.mutate({ cameraFeedID, regions: regions });
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
        <h2 className="text-2xl mb-2">Tools</h2>
        <div className="flex flex-col">
          <label
            htmlFor="paintMode"
            className={`p-4 border rounded-lg  mb-2
            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
          >
            <input
              id="paintMode"
              type="radio"
              onChange={handleChange}
              checked={mode === "painter"}
              value="painter"
              className="sr-only"
            />
            <span className="text-xl">Paint mode</span>
          </label>
          <label
            htmlFor="eraseMode"
            className={`p-4 border rounded-lg  mb-2
            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
          >
            <input
              id="eraseMode"
              type="radio"
              onChange={handleChange}
              checked={mode === "eraser"}
              value={"eraser"}
              className="sr-only"
            />
            <span className="text-xl">Erase mode</span>
          </label>
        </div>
      </div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
        <h2 className="text-2xl mb-2">Region Select</h2>
        <>
          {regions?.map((region, idx) => {
            const isSelected = selectedRegionIndex === idx;
            const inputId = `region-${idx}`;
            return (
              <label
                htmlFor={inputId}
                key={region.name}
                className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
              >
                <div className="flex flex-row gap-4 items-center">
                  <input
                    type="radio"
                    checked={isSelected}
                    id={inputId}
                    name="region"
                    className="sr-only"
                    onChange={() => {
                      handleModeChange("painter");
                      handleRegionSelect(idx);
                    }}
                  />
                  <span className="text-xl">{region.name}</span>
                </div>
                <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
                <div></div>
              </label>
            );
          })}
        </>
      </div>

      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
        <div className="flex flex-col">
          <h2 className="text-2xl mb-2">Actions</h2>
          <button
            onClick={handleSaveclick}
            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
          >
            Save Region
          </button>
          <button
            onClick={handleResetRegion}
            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
          >
            Reset Region
          </button>
        </div>
      </div>
    </div>
  );
};

export default RegionSelector;