import { handle, resetError } from "./ErrorHandler";
import { Ajax } from "./Ajax";
import {createEvent} from "../events";

export const form = (name) => {
  const url = new URL(window.location);
  const getForm = () => {
    return document.querySelector(`[data-role="${name}"]`);
  }

  const getBtnReload = () => {
    return document.querySelectorAll(`[data-role="${name}-reset"]`);
  }

  if (!getForm()) {
    console.error(`${name} this form undefined`);
    return false;
  }

  const getInput = () => {
    return getForm().querySelectorAll('.form-field')
  }

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

    e.preventDefault()

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

    resetError();

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

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

    if (formData.get('phone')) {
      formData.set('phone', formData.get('full_number'));
    }

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

    Ajax('POST', getAction(), formData).then(data => {
      if (data.errors) {
        handle(data.errors, getForm(), getFormName())
        return;
      }

      if (data.success) {
        if (getSuccess()) {
          createEvent({event:'saas_form_sent'});
          getSuccess().style.display = 'flex';
          getForm().style.display = 'none';
        }
      }
    })
      .catch(() => {
      if (getError()) {
        getError().style.display = 'flex';
        getForm().style.display = 'none';
      }
      })
      .finally(() => {
        if (getFormBtn()) {
          grecaptcha.reset();
          getFormBtn().classList.remove('button--loading');
        }
      });
  });

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

  const onBlur = (e) => {
    const input = e.target;

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

    if (!group) return;

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

  const reloadForm = () => {
    getError().style.display = 'none';
    getForm().style.display = 'block';
    getSuccess().style.display = 'none';
    getForm().reset();
    getInput().forEach(item => {
      if (item) {
        item.classList.remove('error');
        item.classList.remove('filled');
      }
    });
  }

  if (getBtnReload().length !== 0) {
    getBtnReload().forEach((item) => {
      item.addEventListener('click', () => {
        reloadForm();
      }, false);
    })
  }

  const getAction = () => {
    return getForm().getAttribute('action');
  }

  const getError = () => {
    return document.querySelector('.form-error');
  }

  const getSuccess = () => {
    return document.querySelector('.form-success');
  }

  const linkSuccess = () => {
    return getSuccess().querySelector('[data-lang-type="link"]');
  }

  const getFormName = () => {
    return getForm().getAttribute('data-name');
  }

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

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

  if (linkSuccess()) {
    linkSuccess().addEventListener('click', (e) => {
      e.preventDefault();

      window.location.reload();
      return false;
    }, false);
  }
};