import { useState } from "react";

import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
import CameraSettings from "./CameraSettings/CameraSettings";

import PlatePatch from "./PlatePatch/SightingPatch";
import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal";

const CameraGrid = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [isResetModalOpen, setIsResetModalOpen] = useState(false);

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
        <div className="col-span-2 flex flex-col gap-4">
          <div className="">
            <VideoFeedGridPainter />
          </div>
          <div className="overflow-hidden">
            <PlatePatch />
          </div>
        </div>
        <CameraSettings
          tabIndex={tabIndex}
          setTabIndex={setTabIndex}
          isResetAllModalOpen={isResetModalOpen}
          handleClose={() => setIsResetModalOpen(false)}
          setIsResetModalOpen={setIsResetModalOpen}
        />
      </div>
      <ResetAllModal isResetAllModalOpen={isResetModalOpen} handleClose={() => setIsResetModalOpen(false)} />
    </>
  );
};

export default CameraGrid;