/* eslint-disable no-irregular-whitespace */
import { Trans } from "react-i18next";
import useSidebarTabStore from "../stores/useSidebarStore";
import ContactsForm from "./ContactsForm";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import CloseIcon from "./icons/CloseIcon";

function SidebarTab3() {
  const [
    currentTab,
    setCurrentTab,
    setIsOpen,
    name,
    phone,
    email,
  ] = useSidebarTabStore((state) => [
    state.currentTab,
    state.setCurrentTab,
    state.setIsOpen,
    state.name,
    state.phone,
    state.email,
    state.selectedDay,
    state.selectedTime,
  ]);

  function handleSubmit() {
    if (!name || !phone || !email) {
      return;
    }

    setCurrentTab(currentTab + 1);
  }

  return (
    <form
      onSubmit={handleSubmit}
      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">
          <p className="text-2xl text-gradient font-semibold font-gilroy w-fit leading-snug">
            <Trans i18nKey={"sidebar.title2"}>Контакты</Trans>
          </p>
          <button
            onClick={() => setIsOpen(false)}
            className="transition-opacity hover:opacity-50"
          >
            <CloseIcon />
          </button>
        </div>

        <div className="sm:mt-6 mt-4">
          <ContactsForm />
        </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 className="flex sm:gap-4 gap-2">
          <button
            onClick={() => setCurrentTab(currentTab - 1)}
            className="px-6 py-4 border border-[#3D425C] rounded-full sm:text-base text-sm font-medium group w-fit"
          >
            <span className="opacity-80 transition-opacity group-hover:opacity-100">
              <Trans i18nKey={"sidebar.buttonBack"}>Назад</Trans>
            </span>
          </button>

          <button
            type="submit"
            className="px-6 py-3 bg-gradient rounded-full sm:text-base text-sm font-medium flex items-center justify-between w-full"
          >
            <span>
              <Trans i18nKey={"sidebar.buttonNext"}>Далее</Trans>
            </span>
            <ArrowRightIcon className="sm:w-8 sm:h-8 w-6 h-6" />
          </button>
        </div>
      </div>
    </form>
  );
}

export default SidebarTab3;