import { useMutation, useQueryClient } from "@tanstack/react-query";
import useModalStore from "../../stores/useModalStore";
import { Session } from "../../types/Session";
import Button from "../Button";
import CurrentSessionModal from "./CurrentSessionModal";
import api from "../../utils/api";
import SpinIcon from "../icons/SpinIcon";
import SessionModal from "./SessionModal";

function EndSessionModal({ session }: { session: Session }) {
  const queryClient = useQueryClient();

  const { setModal, setPosition } = useModalStore();

  const {
    mutate: endSession,
    isPending,
    isSuccess,
  } = useMutation({
    mutationKey: ["sessions", session.id],
    mutationFn: () =>
      api
        .put(`sessions/${session.id}`, { json: { status: "ending" } })
        .json<Session>(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["servers"] });
      queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
    },
  });

  return (
    <div className="w-[25vw] bg-white rounded-[2.222vw]">
      {isPending ? (
        <div className="flex flex-col gap-[1.667vw] w-[25vw] justify-center items-center py-[1.806vw]">
          <div className="flex flex-col gap-[0.556vw] w-full items-center">
            <h2 className="title-m font-medium">Завершаем сеанс</h2>
            <p className="caption-m font-medium text-[#BDBDBD]">
              Сохраняем данные, чтобы ничего не потерять
            </p>
          </div>
          <span className="size-[4.444vw] animate-spin text-[#7B60F3] flex items-center justify-center">
            <SpinIcon />
          </span>
        </div>
      ) : (
        <>
          <h2 className="title-s font-medium text-center py-[1.806vw]">
            Текущий сеанс
          </h2>
          <div className="p-[1.389vw] flex flex-col gap-[1.667vw]">
            <div className="flex flex-col gap-[0.556vw]">
              <p className="title-m font-medium">
                {isSuccess
                  ? "Доступен отчет по встрече"
                  : "Точно хотите завершить сеанс?"}
              </p>
              <p className="caption-m font-medium text-[#BDBDBD]">
                {isSuccess
                  ? "Вы можете просмотреть отчет или создать новый сеанс, перейдя на главную страницу"
                  : "Текущий сеанс будет завершен немедленно"}
              </p>
            </div>
            <div className="flex flex-col gap-[0.556vw]">
              <Button
                size="large"
                variant={isSuccess ? "cta" : "critical"}
                className="w-full"
                onClick={() => {
                  if (isSuccess) {
                    setPosition("right");
                    setModal(<SessionModal session={session} />);
                  } else {
                    endSession();
                  }
                }}
                disabled={isPending}
              >
                {isSuccess ? "Перейти к отчету" : "Завершить сеанс"}
              </Button>
              <Button
                size="large"
                variant="primary"
                className="w-full"
                onClick={() => {
                  if (isSuccess) {
                    setModal(null);
                  } else {
                    setModal(<CurrentSessionModal session={session} />);
                  }
                }}
              >
                {isSuccess ? "На главную" : "Отменить"}
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default EndSessionModal;