import Button from "./Button";
import SessionIcon from "./icons/SessionIcon";
import Input from "./Input";
import useQueryApps from "../queries/useQueryApps.ts";
import useQueryServers from "../queries/useQueryServers.ts";
import Select from "./Select.tsx";

export default function CreateSessionModal() {
  const { data: apps } = useQueryApps();

  const { data: servers } = useQueryServers();

  return (
    <div className="w-[27.222vw] h-full rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
      <div className="gap-y-[1.111vw] flex flex-col justify-between">
        <div className="space-y-[0.556vw]">
          <div className="rounded-[0.556vw] w-fit p-[0.833vw] bg-[#2D68F60D]">
            <div className="min-w-[1.389vw] min-h-[1.389vw] text-[#2D68F6]">
              <SessionIcon />
            </div>
          </div>
          <p className="text-[1.389vw]">Создание сеанса</p>
          <p className="text-[0.833vw] text-black/20">
            Укажите данные клиента, выберите менеджера и стол
          </p>
        </div>
        <hr className="border-black/10" />
        <div className="flex justify-between items-center">
          <p className="text-[0.972vw]">
            Имя <span className="text-[#C6C6C699]">*</span>
          </p>
          <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
            <Input placeholder="Константин" required />
          </div>
        </div>
        <div className="flex justify-between items-center">
          <p className="text-[0.972vw]">
            Номер <span className="text-[#C6C6C699]">*</span>
          </p>
          <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
            <Input placeholder="+ 7 (999) 99 99 99" required type="tel" />
          </div>
        </div>
        <div className="flex justify-between items-center">
          <p className="text-[0.972vw]">Электронная почта</p>
          <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
            <Input placeholder="sample@mail.ru" type="email" />
          </div>
        </div>
        {apps && (
          <div className="flex justify-between items-center">
            <p className="text-[0.972vw]">Приложение</p>
            <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
              <Select
                options={apps.map(({ id, name }) => ({ id, value: name }))}
              />
            </div>
          </div>
        )}
        <hr className="border-black/10" />
      </div>
      <div className="flex justify-between">
        <Button className="bg-[#F9F9F9] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
          <p className="text-black font-medium text-[0.972vw]">Отменить</p>
        </Button>
        <Button className="bg-[#2D68F6] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
          <p className="text-[0.972vw] font-medium">Запустить сеанс</p>
        </Button>
      </div>
    </div>
  );
}