import { useMutation, useQueryClient } from "@tanstack/react-query";
import api from "../utils/api";
import { IServer } from "../types/IServer";
import useModalStore from "../stores/useModalStore";
import CreateSessionModal from "./modals/CreateSessionModal";
import NewButton from "./NewButton";
import FlashIcon from "./icons/FlashIcon";
import CogIcon from "./icons/CogIcon";
import ChevronLeftIcon from "./icons/ChevronLeftIcon";
import PlusIcon from "./icons/PlusIcon";

interface IDesktopCardProps {
  server: IServer;
}

export default function DesktopCard({ server }: IDesktopCardProps) {
  const { setModal, setPosition } = useModalStore();
  const queryClient = useQueryClient();
  const servers = queryClient.getQueryData<IServer[]>(["servers"]);

  // const { mutate: createSession } = useMutation({
  //   mutationFn: () =>
  //     api.post(`sessions`, {
  //       json: {
  //         serverId: server.id,
  //         clientId: "abcfd570-2fa8-4f55-957b-5007f84f8f96",
  //         appId: "b8a9995c-a799-4593-8f96-03942050cb21",
  //       },
  //     }),
  //   onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
  // });

  const { mutate: endSession } = useMutation({
    mutationKey: ["sessions", server.sessions?.[0]?.id],
    mutationFn: () =>
      api.put(`sessions/${server.sessions?.[0]?.id}`, {
        json: { status: "ending" },
      }),
    onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
  });

  async function handleClickCreateSession() {
    setPosition("right");
    setModal(<CreateSessionModal servers={servers} />);
  }

  return (
    <div className='flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]'>
      <div className='relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]'>
        <NewButton
          variant='secondary'
          size='medium'
          className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
        >
          <span className='text-[#7D7D7D] w-[0.972vw] h-[0.972vw]'>
            <CogIcon />
          </span>
        </NewButton>
      </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.location}</p>
        </div>
      </div>
      <div className='flex gap-[0.278vw] justify-center -mt-[0.278vw]'>
        {server.sessions?.[0]?.status === "started" ? (
          <div className='flex items-center gap-[0.278vw]'>
            <NewButton
              variant='primary'
              onClick={() => endSession()}
              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'>
                <ChevronLeftIcon />
              </span>
            </NewButton>
          </div>
        ) : (
          <NewButton
            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>
          </NewButton>
        )}
      </div>
    </div>
  );
}