import { Outlet } from "react-router";
import Navbar from "./Navbar";
import { useQuery } from "@tanstack/react-query";
import api from "../utils/api";
import CurrentSessionCard from "./CurrentSessionCard";
import { Session } from "../types/Session";
import { AnimatePresence } from "motion/react";
import Button from "./Button";
import PlusIcon from "./icons/PlusIcon";
import useModalStore from "../stores/useModalStore";
import CreateSessionModal from "./modals/CreateSessionModal";

function Layout() {
  const { data: currentStartedSessions } = useQuery({
    queryKey: ["sessions", "last-started"],
    queryFn: () =>
      api
        .get("sessions", {
          searchParams: { limit: 3, status: "started" },
        })
        .json<Session[]>(),
    refetchInterval: 1000,
  });

  const { setModal, setPosition } = useModalStore();

  return (
    <div className="flex gap-[1.667vw] overflow-hidden px-[2.222vw] pt-[1.667vw] pb-[2.778vw]">
      <div className="flex-1"></div>
      <div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
        <Navbar />
        <Outlet />
      </div>
      <div className="flex-1 flex flex-col items-center gap-y-[0.833vw]">
        <AnimatePresence>
          {currentStartedSessions?.map((session, index, { length }) => (
            <CurrentSessionCard
              key={session.id}
              session={session}
              index={length - index}
            />
          ))}
        </AnimatePresence>
        <Button
          variant="cta"
          size="large"
          className="w-[18.889vw]"
          onClick={() => {
            setPosition("right");
            setModal(<CreateSessionModal targetServerId={null} />);
          }}
        >
          <span className="w-[1.111vw] h-[1.111vw] flex items-center justify-center">
            <PlusIcon />
          </span>
          Создать сеанс
        </Button>
      </div>
    </div>
  );
}

export default Layout;
