import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
import { useModalStore } from '../../stores/modalStore';
import { Button } from '../ui/Button';
import { useEffect, useRef, useState } from 'react';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { CloseIcon } from '../icons/CloseIcon';
import { FeedbackForm } from './FeedbackForm';
import { useOnClickOutside } from 'usehooks-ts';

export function ModalWithForm() {
  const { setModal } = useModalStore();
  const [sent, setSent] = useState(false);
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const listener = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setModal(false);
      }
    };
    document.addEventListener('keydown', listener);

    return () => document.removeEventListener('keydown', listener);
  }, [setModal]);

  useOnClickOutside(modalRef, () => setModal(false));

  return (
    <div
      ref={modalRef}
      className="fixed flex flex-col gap-4 top-0 right-0 h-full sm:w-[408px] w-full bg-[#14161F] overflow-y-auto sm:p-8 p-6"
    >
      {!sent ? (
        <div className="space-y-8">
          <div className="flex justify-between items-center">
            <p className="font-medium accent">Оставьте заявку</p>
            <button
              onClick={() => setModal(null)}
              className="p-2 lg:hover:bg-white lg:hover:bg-opacity-10 transition-colors rounded-full"
            >
              <CloseIcon />
            </button>
          </div>
          <FeedbackForm inModal send={() => setSent(true)} />
        </div>
      ) : (
        <div>
          <div className="space-y-8">
            <h2 className="h2 font-medium">Спасибо за отправку заявки!</h2>
            <p className="m-text">
              Мы ценим ваш интерес к нашей компании и в ближайшее время свяжемся
              с вами для уточнения деталей проекта.
            </p>
          </div>
          <Button
            width="full"
            className="py-5 px-6 absolute top-[50vh]"
            icon={
              <ClassNameWrapper
                className="w-6 h-6"
                element={<ArrowRightIcon />}
              />
            }
            onClick={() => setModal(false)}
          >
            На главную
          </Button>
        </div>
      )}
    </div>
  );
}
