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 { ISession } from "../types/ISession";
import { AnimatePresence } from "motion/react";
import NewButton from "./NewButton";
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<ISession[]>(),
    refetchInterval: 1000,
  });

  const { setModal, setPosition } = useModalStore();

  return (
    <div className="flex gap-[1.667vw] overflow-hidden">
      <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] py-[1.667vw]">
        <AnimatePresence>
          {currentStartedSessions?.map((session, index, { length }) => (
            <CurrentSessionCard
              key={session.id}
              session={session}
              index={length - index}
            />
          ))}
        </AnimatePresence>
        <NewButton
          variant="cta"
          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>
          Создать сеанс
        </NewButton>
      </div>
    </div>
  );
}

export default Layout;