import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
import { useEffect } from "react";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import RegionSelector from "./RegionSelector";

type CameraPanelProps = {
  tabIndex: number;
  isResetAllModalOpen: boolean;
  handleClose: () => void;
  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: 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 (
    <Tabs>
      <TabList>
        <Tab>Target Detection</Tab>
        <Tab>Camera Controls</Tab>
      </TabList>
      <TabPanel>
        <RegionSelector
          regions={regions}
          selectedRegionIndex={selectedRegionIndex}
          mode={mode}
          cameraFeedID={cameraFeedID}
          isResetAllModalOpen={isResetAllModalOpen}
          handleClose={handleClose}
          setIsResetModalOpen={setIsResetModalOpen}
        />
      </TabPanel>
      <TabPanel>
        <div className="p-4">
          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
          <p>Controls for camera {cameraFeedID} will go here.</p>
        </div>
      </TabPanel>
    </Tabs>
  );
};

export default CameraPanel;