import { useEffect } from "react";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import RegionSelector from "./RegionSelector";

type CameraPanelProps = {
  tabIndex: number;
};

const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
  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 0:
          return "A";
        case 1:
          return "B";
        case 2:
          return "C";
        default:
          return "A";
      }
    };

    const cameraId = mapIndextoCameraId();
    dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
  }, [dispatch, tabIndex]);

  return (
    <RegionSelector
      regions={regions}
      selectedRegionIndex={selectedRegionIndex}
      mode={mode}
      cameraFeedID={cameraFeedID}
    />
  );
};

export default CameraPanel;