import { form } from './../../scripts/form/form.ts';
import phone from '../../scripts/form/phone.ts';
import { staticHtmlLanguageParse } from '../../utils/translations/translation.ts';
import { clickOnFader, keyDownEscape } from '../../scripts/click-on-fader.ts';

type PopupForm = (document: ShadowRoot, onOpen: () => void, onClose: () => void) => void;
export const popupForm: PopupForm = (document, onOpen, onClose) => {
  const initPopup = () => {
    const formElement = document.querySelector('form');
    const closeBtn = document.querySelector('.modal-once__close');
    const lang = localStorage.getItem('form__lang') || 'en';
    const { keyOpen, keyClose } = keyDownEscape(onClose);

    if (formElement) {
      onOpen();
      keyOpen();
      phone(document);
      staticHtmlLanguageParse(document, lang);
      form(formElement, `${import.meta.env.VITE_FORMS_API_URL}/api/popup`, {
        onSuccess: () => {
          setTimeout(() => {
            onClose();
            keyClose();
          }, 5000);
        },
      });
    }
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        onClose();
        keyClose();
      });
    }

    clickOnFader(document, () => {
      onClose();
      keyClose();
    });
  };
  initPopup();
};