import Card from "../../../../ui/Card";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import RegionSelector from "./RegionSelector";
import type { Region } from "../../../../types/types";
import { useState } from "react";

type CameraSettingsProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
  isErasing: boolean;
  onSelectErasing: (isErasing: boolean) => void;
};

const CameraSettings = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  isErasing,
  onSelectErasing,
}: CameraSettingsProps) => {
  const [tabIndex, setTabIndex] = useState(0);
  return (
    <Card className="p-4 max-h-screen col-span-3">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
          <Tab>Target Detection</Tab>
          <Tab>Camera 1</Tab>
          <Tab>Camera 2</Tab>
          <Tab>Camera 3</Tab>
        </TabList>
        <TabPanel>
          <RegionSelector
            regions={regions}
            selectedRegionIndex={selectedRegionIndex}
            onSelectRegion={onSelectRegion}
            onChangeRegionColour={onChangeRegionColour}
            isErasing={isErasing}
            onSelectErasing={onSelectErasing}
          />
        </TabPanel>
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
      </Tabs>
    </Card>
  );
};

export default CameraSettings;