graff-mate-client/src/components/modals/SessionModal.tsx

import { Session } from "../../types/Session";
import { format } from "date-fns";
import { ru } from "date-fns/locale";
import getIntervalDuration from "../../utils/interval-duration";
import MagicIcon from "../icons/MagicIcon";
import Button from "../Button";
import ChevronRightIcon from "../icons/ChevronRightIcon";
import Badge from "../Badge";
import ClientCard from "../ClientCard";
import SessionComments from "../SessionComments";
import { useQuery } from "@tanstack/react-query";
import api from "../../utils/api";
import { useEffect } from "react";
import SessionFiles from "../SessionFiles";
import DownloadIcon from "../icons/DownloadIcon";
import ShareIcon from "../icons/ShareIcon";

function SessionModal({ session }: { session: Session }) {
  const { data } = useQuery({
    queryKey: ["file-list"],
    queryFn: () =>
      api
        .get("files", {
          searchParams: {
            sessionId: session.id,
          },
        })
        .json<{ filename: string; size: number }[]>(),
  });

  useEffect(() => {
    console.log(data);
  }, [data]);

  return (
    <div className="bg-[#FFFFFF] w-[49.722vw] rounded-[2.222vw]">
      <div className="w-full flex justify-center items-center h-[4.861vw] border-b-1 border-[#D6D6D6]">
        <div className="title-s flex font-medium">
          <p>{format(session.createdAt, "dd MMMM yyyy", { locale: ru })}</p>
          <p>,&nbsp;{format(session.createdAt, "HH:mm")}</p>
        </div>
      </div>
      <div className="bg-[#F0F0F0] flex h-[calc(100vh-8.861vw)] overflow-hidden rounded-b-[2.222vw]">
        <div className="flex-1 flex flex-col gap-[0.833vw] px-[1.111vw] overflow-y-auto pr-[0.556vw] pb-[1.111vw] [scrollbar-width:thin]">
          <div className="flex flex-col gap-[0.556vw] justify-center items-center pt-[1.111vw]">
            <div className="size-[3.333vw] rounded-full bg-white bg-[url(/images/mock_manager_photo_1_c.png)] bg-cover bg-no-repeat bg-center"></div>
            <div className="flex flex-col gap-[0.278vw] items-center">
              <p className="title-s font-medium">{session.manager.fullname}</p>
              <p className="caption-s text-[#BDBDBD] font-medium">
                Продолжительность:{" "}
                {getIntervalDuration(session.createdAt, session.updatedAt)}
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
            <h3 className="title-s font-medium">Информация о сеансе</h3>
            <div className="flex flex-col gap-[0.556vw]">
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Сценарии:
                </span>
                <span className="caption-s font-medium">Добавить в бэкенд</span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Интерактивный стол:
                </span>
                <span className="caption-s font-medium">
                  {session.server.name}
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Продолжительность сеанса:
                </span>
                <span className="caption-s font-medium">
                  {getIntervalDuration(session.createdAt, session.updatedAt)}
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Проект:
                </span>
                <span className="caption-s font-medium">
                  {session.app.name}
                </span>
              </p>
            </div>
            <ClientCard client={session.client} />
          </div>
          <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
            <h3 className="title-s flex font-medium">
              Речевая&nbsp;
              <span className="text-[#7B60F3] flex">
                аналитика&nbsp;
                <span className="size-[1.389vw] text-[#7B60F3]">
                  <MagicIcon />
                </span>
              </span>
            </h3>
            <div className="flex flex-col gap-[0.556vw]">
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Эффективность встречи:
                </span>
                <span className="caption-s font-medium text-[#29AF61]">
                  Высокая
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Бюджет клиента:
                </span>
                <span className="caption-s font-medium">8 500 000 ₽</span>
              </p>
            </div>
            <div className="bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] py-[0.833vw] text-xs tracking-[-0.02em] leading-[110%]">
              Клиент проявил высокий интерес к объекту, особенно к варианту с
              улучшенной отделкой. Основной вопрос для принятия решения —
              согласование с семьей и выбор этажа. Необходимо подготовить
              предварительный договор к следующей встрече.
            </div>
            <Button variant="primary" size="large">
              Весь отчет по встрече
              <span className="size-[1.111vw] text-[#7B60F3]">
                <ChevronRightIcon />
              </span>
            </Button>
          </div>
          {data && (
            <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
              <h3 className="title-s flex items-center font-medium gap-[0.556vw]">
                <span>Документы по сеансу</span>
                <Badge count={data?.length} />
              </h3>
              <SessionFiles files={data} session={session} />
              <div className="flex w-full gap-[0.556vw]">
                <Button variant="primary" size="large" className="w-full">
                  <span className="size-[1.111vw] text-[#7B60F3]">
                    <DownloadIcon />
                  </span>
                  Скачать архивом
                </Button>
                <Button variant="primary" size="large">
                  <span className="size-[1.111vw] text-[#7B60F3]">
                    <ShareIcon />
                  </span>
                </Button>
              </div>
            </div>
          )}
        </div>
        <SessionComments sessionId={session.id} />
      </div>
    </div>
  );
}

export default SessionModal;