import FlashIcon from "./icons/FlashIcon";
import { Session } from "../types/ISession";
import Button from "./Button";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import { motion } from "motion/react";
import CurrentSessionModal from "./modals/CurrentSessionModal";
import useModalStore from "../stores/useModalStore";
import EndSessionModal from "./modals/EndSessionModal";

function CurrentSessionCard({
  session,
  index,
}: {
  session: Session;
  index: number;
}) {
  const { setModal } = useModalStore();

  // const queryClient = useQueryClient();

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

  return (
    <motion.div
      key={session.id}
      layout
      initial={{ x: "100%" }}
      animate={{ x: "0%" }}
      exit={{ x: "100%" }}
      transition={{ bounce: 0, delay: index * 0.1 }}
      className="p-[1.389vw] rounded-[1.667vw] bg-white w-[18.889vw] flex flex-col gap-[0.833vw] shadow-[0px_4px_40px_0_rgba(0,0,0,0.05),0px_2px_2px_0_rgba(0,0,0,0.05)]"
    >
      <div
        className="flex justify-between gap-[0.833vw] items-center cursor-pointer"
        onClick={() => {
          if (session.status === "started") {
            setModal(<CurrentSessionModal session={session} />);
          }
        }}
      >
        <span className="size-[1.111vw] text-[#7B60F3]">
          <FlashIcon />
        </span>
        <div className="flex flex-col items-center gap-y-[0.278vw]">
          <p className="button-m font-medium text-[#7B60F3] text-center">
            Текущий сеанс
          </p>
          <div className="flex items-center gap-[0.278vw]">
            <p className="caption-s font-medium text-[#7D7D7D]">
              {session.server.name}
            </p>
            <div className="size-[0.139vw] bg-[#7D7D7D] rounded-full" />
            <p className="caption-s font-medium text-[#7D7D7D]">
              {session.owner.fullname}
            </p>
          </div>
        </div>
        <span className="size-[1.111vw] text-[#7D7D7D]">
          <ChevronRightIcon />
        </span>
      </div>
      <Button
        variant="critical"
        onClick={() => setModal(<EndSessionModal session={session} />)}
      >
        Завершить сеанс
      </Button>
    </motion.div>
  );
}

export default CurrentSessionCard;