import { Server } from "../types/Server";
import useModalStore from "../stores/useModalStore";
import CreateSessionModal from "./modals/CreateSessionModal";
import Button from "./Button";
import FlashIcon from "./icons/FlashIcon";
import CogIcon from "./icons/CogIcon";
import PlusIcon from "./icons/PlusIcon";
import EditTable from "./modals/EditTableModal";
import UnlinkIcon from "./icons/UnlinkIcon";
import clsx from "clsx";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import CurrentSessionModal from "./modals/CurrentSessionModal";
import SpinIcon from "./icons/SpinIcon";
import { useIsMutating } from "@tanstack/react-query";

interface IDesktopCardProps {
  server: Server;
}

export default function DesktopCard({ server }: IDesktopCardProps) {
  const { setModal, setPosition } = useModalStore();

  const isStarting = useIsMutating({
    mutationKey: ["create-session", server.id],
  });

  async function handleClickCreateSession() {
    setPosition("right");
    setModal(<CreateSessionModal targetServerId={server.id} />);
  }

  return (
    <div className="flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]">
      <div
        className={clsx(
          'relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-[1.667vw] bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]',
          server.status === "offline" && "opacity-40"
        )}
      >
        <Button
          variant="secondary"
          size="small"
          className="absolute top-[0.556vw] right-[0.556vw] cursor-pointer flex items-center justify-center"
          onClick={() => setModal(<EditTable table={server} />)}
        >
          <span className="text-[#7D7D7D] w-[0.972vw] h-[0.972vw]">
            <CogIcon />
          </span>
        </Button>
      </div>
      <div className="flex self-center justify-between items-start">
        <div className="space-y-[0.278vw] text-center">
          <p className="leading-none font-[500] text-[1.111vw] title-s">
            {server.name}
          </p>
          <p className="caption-s text-[#7D7D7D]">{server.description}</p>
        </div>
      </div>
      <div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
        {server.sessions?.[0]?.status === "starting" || isStarting ? (
          <div className="flex items-center gap-[0.278vw] bg-[#F8F7FE] p-[0.833vw] rounded-[0.833vw]">
            <span className="size-[1.111vw] animate-spin text-[#7B60F3]">
              <SpinIcon />
            </span>
            <div className="button-s font-medium text-[#7B60F3]">
              Начинаем сеанс
            </div>
          </div>
        ) : server.sessions?.[0]?.status === "started" ? (
          <div className="flex items-center gap-[0.278vw]">
            <Button
              variant="primary"
              onClick={() => {
                if (server.sessions?.length && server.sessions?.[0]) {
                  setModal(
                    <CurrentSessionModal session={server.sessions[0]} />
                  );
                }
              }}
              className="flex gap-[0.556vw] items-center"
            >
              <span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
                <FlashIcon />
              </span>
              <p className="button-s font-medium">Идёт сеанс</p>
              <span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
                <ChevronRightIcon />
              </span>
            </Button>
          </div>
        ) : server.status === "offline" ? (
          <Button
            variant="critical"
            className="hover:bg-[#FEF3F2] !cursor-default"
          >
            <span className="text-[#FF4517] size-[0.972vw]">
              <UnlinkIcon />
            </span>
            <span>Проверьте соединение</span>
          </Button>
        ) : (
          <Button
            variant="cta"
            size="medium"
            className="self-center"
            onClick={handleClickCreateSession}
          >
            <div className="flex gap-[0.556vw] items-center justify-center">
              <span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
                <PlusIcon />
              </span>
              <p className="button-s">Создать сеанс</p>
            </div>
          </Button>
        )}
      </div>
    </div>
  );
}
