/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable no-irregular-whitespace */
import { Trans } from "react-i18next";
import useSidebarTabStore from "../stores/useSidebarStore";
import Calendar from "./Calendar";
import CloseIcon from "./icons/CloseIcon";
import { useEffect, useState } from "react";
import ky from "ky";
import LoaderIcon from "./icons/LoaderIcon";

function SidebarTab1() {
  const {
    currentTab,
    setCurrentTab,
    setIsOpen,
    setSelectedDay,
    companyId,
    buildId,
  } = useSidebarTabStore();
  const [schedules, setSchedules] = useState<any[]>([]);

  function handleSelectDay(day: Date) {
    setSelectedDay(day);
    setCurrentTab(currentTab + 1);
  }

  async function getSchedules() {
    try {
      const result: any[] = await ky
        .get(
          `${
            import.meta.env.VITE_CRM_API_URL
          }/schedules/companies/${companyId}/builds/${buildId}`
        )
        .json();

      setSchedules(result);
    } catch (error) {
      if (error instanceof Error) {
        console.log("Error: ", error.message);
      }
    }
  }

  useEffect(() => {
    getSchedules();
  }, []);

  return (
    <div className="sm:p-8 p-6 flex flex-col justify-between sm:gap-8 gap-6 min-h-full">
      <div>
        <div className="flex items-start justify-between gap-4">
          <p className="text-2xl text-gradient font-semibold font-gilroy w-fit leading-snug">
            <Trans i18nKey={"sidebar.title1"}>Дата и время</Trans>
          </p>
          <button
            onClick={() => setIsOpen(false)}
            className="transition-opacity hover:opacity-50"
          >
            <CloseIcon />
          </button>
        </div>

        <div className="mt-2">
          <div className="grid grid-cols-2 gap-2">
            <div className="border-b border-[#798FFF] p-4 text-center">
              <p className="leading-none font-gilroy font-semibold text-sm">
                <Trans i18nKey={"sidebar.date"}>Дата</Trans>
              </p>
            </div>

            <div className="border-b border-[#3D425C] p-4 text-center">
              <p className="leading-none font-gilroy font-semibold text-sm">
                <Trans i18nKey={"sidebar.time"}>Время</Trans>
              </p>
            </div>
          </div>
        </div>

        <div className="sm:mt-8 mt-6">
          {schedules.length > 0 ? (
            <Calendar
              schedules={schedules}
              handleSelect={(day) => handleSelectDay(day)}
            />
          ) : (
            <LoaderIcon className="2xl:w-8 2xl:h-8 w-6 h-6 animate-spin" />
          )}
        </div>
      </div>

      <div className="flex flex-col sm:gap-6 gap-4">
        <p className="text-center text-xs opacity-50 leading-tight">
          <Trans i18nKey={"sidebar.notice"}>
            Запись на демонстрацию работает в ознакомительном режиме и не
            сохраняет введенные данные
          </Trans>
        </p>
      </div>
    </div>
  );
}

export default SidebarTab1;
