- Enhanced camera feed state management with region handling and mode changes

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -1,33 +1,45 @@
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import RegionSelector from "./RegionSelector";
 
 type CameraPanelProps = {
   tabIndex: number;
 };
 
 const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
-  const { dispatch } = useCameraFeedContext();
+  const { state, dispatch } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const regions = state.regionsByCamera[cameraFeedID];
+
+  const selectedRegionIndex = state.selectedRegionIndex;
+  const mode = state.modeByCamera[cameraFeedID];
 
   useEffect(() => {
     const mapIndextoCameraId = () => {
       switch (tabIndex) {
-        case 1:
+        case 0:
           return "A";
-        case 2:
+        case 1:
           return "B";
-        case 3:
+        case 2:
           return "C";
         default:
-          return null;
+          return "A";
       }
     };
 
     const cameraId = mapIndextoCameraId();
-    console.log(cameraId);
     dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
   }, [dispatch, tabIndex]);
 
-  return <div>CameraPanel</div>;
+  return (
+    <RegionSelector
+      regions={regions}
+      selectedRegionIndex={selectedRegionIndex}
+      mode={mode}
+      cameraFeedID={cameraFeedID}
+    />
+  );
 };
 
 export default CameraPanel;