import clsx from "clsx";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import Card from "../UI/Card";
import { useNavigate, useLocation } from "react-router";
import { useSwipeable } from "react-swipeable";

const OverviewVideoContainer = ({
  side,
  settingsPage,
  zoomLevel,
  onZoomLevelChange,
}: {
  title: string;
  side: string;
  settingsPage?: boolean;
  zoomLevel?: number;
  onZoomLevelChange?: (level: number) => void;
}) => {
  const navigate = useNavigate();
  const location = useLocation();
  const handlers = useSwipeable({
    onSwipedLeft: () => {
      if (location.pathname === "/b-camera-settings") return;
      navigate("/");
    },
    onSwipedRight: () => {
      if (location.pathname === "/a-camera-settings") return;
      navigate("/");
    },
    trackMouse: true,
  });
  return (
    <Card className={clsx("relative min-h-[40vh] md:min-h-[40vh] max-h-[70vh] lg:w-[70%] overflow-y-hidden")}>
      <div className="w-full" {...handlers}>
        <SnapshotContainer
          side={side}
          settingsPage={settingsPage}
          zoomLevel={zoomLevel}
          onZoomLevelChange={onZoomLevelChange}
        />
      </div>
    </Card>
  );
};

export default OverviewVideoContainer;