const FORM_SELECTOR = '#lclc-whatsapp-form';
const FORM_SUBMIT_SELECTOR = '.lclc-form-submit';

// Init jquery validate in form
const initValidation = () => {
  jQuery(FORM_SELECTOR).validate({
    rules: {
      "lclc-whatsapp-mobile": { 
        customMobilePattern: true 
      }
    }
  });
}

// Translate all jquery validator messages to spanish
const executeValidatorConfigurations = () => {
  jQuery.extend(jQuery.validator.messages, {
    required: "Este campo es obligatorio.",
    remote: "Por favor, rellena este campo.",
    email: "Por favor, escribe una dirección de correo válida.",
    url: "Por favor, escribe una URL válida.",
    date: "Por favor, escribe una fecha válida.",
    dateISO: "Por favor, escribe una fecha (ISO) válida.",
    number: "Por favor, escribe un número válido.",
    digits: "Por favor, escribe solo dígitos.",
    creditcard: "Por favor, escribe un número de tarjeta válido.",
    equalTo: "Por favor, escribe el mismo valor de nuevo.",
    extension: "Por favor, escribe un valor con una extensión aceptada.",
    maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
    minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
    rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
    range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
    max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
    min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}."),
    nifES: "Por favor, escribe un NIF válido.",
    nieES: "Por favor, escribe un NIE válido.",
    cifES: "Por favor, escribe un CIF válido."
  });

  // Define custom validation rule for mobile field
  jQuery.validator.addMethod("customMobilePattern", function(value, element) {
    return this.optional(element) || /^[\+0-9]+$/.test(value);
  }, "Por favor, escribe solo números o el símbolo '+' al inicio.");
}

// Add onclick button interaction to open form
const handleOnClickButton = () => {
  const form = jQuery(FORM_SELECTOR);
  if(form.hasClass('open')) return;

  jQuery(FORM_SELECTOR).addClass('open');
}

// Add onclick button interaction to close form
const handleOnCloseForm = () => {
  jQuery(FORM_SELECTOR).removeClass('open');
}

// Add message generator using form data
const generateWhatsAppMessage = ({ nombre, celular, observaciones }) => {
  let message = `Hola, vengo desde ${window.location.origin} y esta es mi información:\n\n`
  message += `*Nombre:* ${nombre}\n`
  message += `*Número de teléfono/celular:* ${celular}`

  // If message field is showed add this value to message
  if(float_whatsapp.show_message_field) {
    message += `\n*Mensaje:* ${observaciones}`
  }

  return message
}

// Add handle function to submit form to wp ajax
const handleOnSubmitForm = (event) => {
  event.preventDefault();

  // Disable submit button
  jQuery(FORM_SUBMIT_SELECTOR).attr('disabled', 'disabled');

  // Get name and phone values
  const nombre = jQuery('#lclc-whatsapp-name').val();
  const phone = jQuery('#lclc-whatsapp-mobile').val();
  
  // Check if message is enabled and is valid
  const message = jQuery('#lclc-whatsapp-message').val();
  const messageIsEnabled = float_whatsapp.show_message_field;
  const messageIsValid = !messageIsEnabled || !!message;

  // Check if form values are valid
  if(!nombre || !phone || !messageIsValid) {
    jQuery(FORM_SUBMIT_SELECTOR).removeAttr('disabled');
    return;
  }

  // Generate basic form data
  const data = {
    action: float_whatsapp.ajax_action,
    lead: {
      Nombre: nombre,
      Celular: phone,
      observaciones: message || '',
      whatsapp_number: float_whatsapp.whatsapp_number,
      form_url_location: window.location.href,
    }
  };

  // Each all hidden form fields and add this and his value to data
  const hiddenFields = jQuery('.lclc-form-button input[type="hidden"]');
  for(const fieldElemet of hiddenFields) {
    const fieldName = jQuery(fieldElemet).attr('name');
    const fieldValue = jQuery(fieldElemet).val();

    data.lead[fieldName] = fieldValue;
  }

  // Dispatch request to save lead and send to LeadApp
  jQuery.ajax({
    method: 'POST',
    url: float_whatsapp.ajax_url,
    data
  }).then((resp) => {
    // Open whatsapp in new tab 
    const message = generateWhatsAppMessage(resp);
    let urlToRedirect = `${float_whatsapp.whatsapp_url}${float_whatsapp.whatsapp_number}`
    urlToRedirect += `?text=${encodeURIComponent(message)}`
    window.open(urlToRedirect, '_blank')

    // Remove disabled attribute to submit button
    jQuery(FORM_SUBMIT_SELECTOR).removeAttr('disabled');

    // Reset form inputs
    jQuery(FORM_SELECTOR)[0].reset();
  }).catch(() => {
    // Remove disabled attribute to submit button
    jQuery(FORM_SUBMIT_SELECTOR).removeAttr('disabled');
  })
}

jQuery(document).ready(function() {
  // Init validator
  initValidation();
  executeValidatorConfigurations();

  // Handle buttons interactions
  jQuery('.lclc-button.whatsapp').on('click', handleOnClickButton)
  jQuery('.lclc-form-header__close').on('click', handleOnCloseForm)
  jQuery(FORM_SELECTOR).on('submit', handleOnSubmitForm)

  if(!!document.referrer) {
    jQuery('.dms-referrer-hidden-input').val(document.referrer)
  }
  
  const buttonsQuantity = jQuery('.lclc-float-buttons .lclc-button').length;
  if(buttonsQuantity > 1 && buttonsQuantity < 3) {
    jQuery(FORM_SELECTOR).addClass('align-center')
  }

  if(buttonsQuantity < 3) {
    jQuery('.lclc-float-buttons').addClass('no-center')
  }

  if(jQuery('.lclc-float-buttons .lclc-button').length > 2) {
    jQuery(FORM_SELECTOR).addClass('align-rigth')
  }
})