import { handle, resetError } from './error-handler.ts';
import { Ajax } from './ajax.ts';
import { getCookieByName } from './cookie.ts';

interface IFormOptions {
  onSuccess?: (parentNode?: ParentNode | null, reloadForm?: () => void) => void;
}

export const form = (formELement: HTMLFormElement, action: string, options: IFormOptions = {}) => {
  const url = new URL(window.location.href);
  const hash = localStorage.getItem('form__lang');
  const getInput = () => {
    return formELement.querySelectorAll('.form-field');
  };
  const formName = formELement.getAttribute('data-name');

  const withoutCaptcha = formELement.hasAttribute('data-wihout-captcha');

  formELement.addEventListener('submit', (e) => {
    const formData = getFormData();
    e.preventDefault();

    if (getFormBtn()) {
      getFormBtn()?.classList.add('button--loading');
    }

    resetError();

    const urlParams = new URLSearchParams(window.location.search);
    const entries = urlParams.entries();
    for (const entry of entries) {
      localStorage.setItem('form__' + entry[0], entry[1]);
    }

    formData.append('landing_url', url.host + url.pathname);
    formData.append('referrer', url.host + url.pathname);

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (!key) return;
      const storageItem = localStorage.getItem(key);
      if (key.includes('form__') && storageItem) {
        formData.append(key.replace('form__', ''), storageItem);
      }
    }

    const phoneNumber = formData.get('full_number');
    if (formData.get('phone') && phoneNumber) {
      formData.set('phone', phoneNumber);
    }

    if (formData.get('full_number')) {
      formData.delete('full_number');
    }

    formData.set('lang_by_browser', hash || 'en');
    formData.set('roistat_id', getCookieByName('roistat_visit'));

    let isSuccess = false;
    Ajax('POST', action, formData)
      ?.then((data) => {
        if (data.success) {
          if (getSuccess()) {
            const success = getSuccess();
            const form = formELement;

            if (success) {
              success.style.display = 'flex';
              toggleClassFormContainer('_success', true);
            }
            if (form) {
              form.style.display = 'none';
            }
            isSuccess = true;
            onSuccess();
          }
        }
      })
      .catch(async (res) => {
        if (!isSuccess) {
          const data = await res.json();
          if (data.errors && Object.keys(data.errors).length > 0) {
            const formElement = formELement;
            if (formElement && formName) {
              handle(data.errors, formElement, formName);
            }
            return
          }

          const error = getError();
          const form = formELement;

          if (error && form) {
            error.style.display = 'flex';
            form.style.display = 'none';
            toggleClassFormContainer('_error', true);
          }
        }
      })
      .finally(() => {
        const formBtnElement = getFormBtn();
        if (formBtnElement) {
          if (!withoutCaptcha) {
            window.grecaptcha.reset();
          }
          formBtnElement.classList.remove('button--loading');
        }
      });
  });

  formELement.addEventListener('blur', (e) => onBlur(e), true);

  const onBlur = (e: FocusEvent) => {
    const input = e.target as HTMLInputElement | null;
    if (!input) return;

    const group = input.closest('.form-field');

    if (!group) return;

    if (input.value) {
      group.classList.add('filled');
    } else {
      group.classList.remove('filled');
    }
  };

  const reloadForm = () => {
    const errorElement = getError();
    const formElement = formELement;
    const successElement = getSuccess();
    const inputs = getInput();
    toggleClassFormContainer('_success', false);
    toggleClassFormContainer('_error', false);

    if (errorElement) {
      errorElement.style.display = 'none';
    }
    if (successElement) {
      successElement.style.display = 'none';
    }
    if (formElement) {
      formElement.style.display = 'flex';
      formElement.reset();
    }
    if (inputs) {
      inputs.forEach((item) => {
        if (item) {
          item.classList.remove('error');
          item.classList.remove('filled');
        }
      });
    }
  };

  const getError = (): HTMLElement | null | undefined => {
    return formELement.parentNode?.querySelector('.form-error');
  };

  const getSuccess: () => HTMLElement | null | undefined = () => {
    return formELement.parentNode?.querySelector('.form-success');
  };

  const toggleClassFormContainer = (className: string, isAdd?: boolean) => {
    const formContend = formELement?.closest('.modal-once__container');
    if (formContend) {
      formContend.classList.toggle(className, isAdd);
    }
  };

  const onSuccess = () => {
    const parentNode = formELement.parentNode;
    if (options.onSuccess) {
      options.onSuccess(parentNode, reloadForm);
      window.grecaptcha.reset(window.dataRequestFormCaptcha);
    }
  };

  const getFormBtn = () => {
    return formELement.querySelector('.button');
  };

  const getFormData = () => {
    return new FormData(formELement);
  };

  const errorMessage = getError();
  if (errorMessage) {
    const resetBtn = errorMessage.querySelector('[data-role="modalOnce-request2-reset"]');
    if (resetBtn) resetBtn.addEventListener('click', reloadForm);
  }
};