import Card from "../../../../ui/Card";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import CameraPanel from "./CameraPanel";
import { CAMERA_IDS } from "../../../../app/config/cameraConfig";

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

const CameraSettings = ({
  setTabIndex,
  isResetAllModalOpen,
  handleClose,
  setIsResetModalOpen,
}: CameraSettingsProps) => {
  return (
    <Card className="p-4 w-full h-full ">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
          {CAMERA_IDS.map((id) => (
            <Tab key={id}>Camera {id}</Tab>
          ))}
        </TabList>
        {CAMERA_IDS.map((id, index) => (
          <TabPanel key={id}>
            <CameraPanel
              tabIndex={index}
              isResetAllModalOpen={isResetAllModalOpen}
              handleClose={handleClose}
              setIsResetModalOpen={setIsResetModalOpen}
            />
          </TabPanel>
        ))}
      </Tabs>
    </Card>
  );
};

export default CameraSettings;