import {
  getCurrentStep,
  initConditionalFields,
  initDropdownsStyling,
  initKeyboardControls,
  initPhone,
  initSelectTabs,
  populateSystemFields,
  prefillFormData,
  storeFormData,
  validateField,
  validateStep,
} from './formUtils';

// Check if it is multi-step form
function isMultiStepForm(form: HTMLFormElement) {
  return form.querySelectorAll('[f-step]').length > 0;
}

// Handle form navigation
function handleNavigation(form: HTMLFormElement, formWrapper: HTMLElement, navAction: string) {
  const currentStep = isMultiStepForm(form) ? getCurrentStep(form) : form;

  if (!currentStep) return;

  const nextTargetButton = formWrapper.querySelector('[f-navigate="next-target"]') as HTMLElement;
  const backTargetButton = formWrapper.querySelector('[f-navigate="back-target"]') as HTMLElement;

  switch (navAction) {
    case 'next':
      if (validateStep(currentStep)) {
        nextTargetButton?.click();
      }
      break;
    case 'back':
      backTargetButton?.click();
      break;
    // Removed 'submit' case
    default:
      console.warn(`Unknown navigation action: ${navAction}`);
  }
}

window.Webflow ||= [];
window.Webflow.push(() => {
  // Get all forms
  const formWrappers = document.querySelectorAll('[f-el="form"]') as NodeListOf<HTMLElement>;
  formWrappers.forEach((formWrapper: HTMLElement) => {
    const form = formWrapper.querySelector('form') as HTMLFormElement;

    // Disable browser's default validation
    formWrapper.classList.remove('w-form');
    form.setAttribute('novalidate', '');

    // Init
    initPhone(form);
    initDropdownsStyling(form);
    initSelectTabs(form);
    populateSystemFields(form);
    initKeyboardControls(form);
    initConditionalFields(form);
    prefillFormData(form);

    // Monitor current steps
    if (isMultiStepForm(form)) {
      getCurrentStep(form);
      const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
            const slide = mutation.target as HTMLElement;
            if (slide.getAttribute('aria-hidden') !== 'true') {
              getCurrentStep(form);
            }
          }
        }
      });
      const slides = form.querySelectorAll('[f-step]');
      slides.forEach((slide) => {
        observer.observe(slide, { attributes: true });
      });
    }

    // Conditional fields event listener
    const conditionTargets = form.querySelectorAll(
      '[f-condition-target]'
    ) as NodeListOf<HTMLElement>;
    conditionTargets.forEach((target) => {
      target.addEventListener('change', () => initConditionalFields(form));

      const valueObserver = new MutationObserver(() => initConditionalFields(form));
      valueObserver.observe(target, {
        attributes: true,
        attributeFilter: ['value'],
        childList: false,
        subtree: false,
      });

      // If the target is a select element, also listen for DOM changes
      if (target instanceof HTMLSelectElement) {
        const selectObserver = new MutationObserver(() => initConditionalFields(form));
        selectObserver.observe(target, {
          childList: true,
          subtree: true,
        });
      }
    });

    // Validate on out of focus
    const inputs = form.querySelectorAll(
      'input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select'
    ) as NodeListOf<HTMLInputElement>;
    inputs.forEach((input) => {
      input.addEventListener('blur', () => validateField(input as HTMLInputElement));
    });

    // Form actions
    form.addEventListener('click', (event) => {
      if (!(event.target instanceof HTMLElement)) return;

      const currentStep = isMultiStepForm(form) ? getCurrentStep(form) : form;
      if (!currentStep) return;

      if (event.target.hasAttribute('f-navigate')) {
        handleNavigation(form, formWrapper, event.target.getAttribute('f-navigate') || '');
      }
      // Removed the submit button click handler
    });

    // Add submit event listener to handle form submission
    form.addEventListener('submit', function (event) {
      const currentStep = isMultiStepForm(form) ? getCurrentStep(form) : form;

      if (!currentStep) return;

      if (!validateStep(currentStep)) {
        event.preventDefault(); // Prevent form submission
        console.log('Validation failed');
        // Display validation errors to the user
      } else {
        formWrapper.classList.add('w-form');
        console.log('Validation passed');
        storeFormData(form);
        // Allow form to submit via Webflow's native method
      }
    });
  });

  /** OUTSIDE NAVIGATION BUTTONS */
  const outsideNavButtons = document.querySelectorAll(
    '[f-navigate-outside]'
  ) as NodeListOf<HTMLElement>;
  outsideNavButtons.forEach((navButton) => {
    const formName = navButton.getAttribute('f-navigate-outside');
    const form = document.querySelector(`form[data-name="${formName}"]`) as HTMLFormElement;
    const formWrapper = form?.closest('[f-el="form"]') as HTMLElement;

    if (form && formWrapper) {
      navButton.addEventListener('click', () => {
        const navAction = navButton.getAttribute('f-navigate') || '';
        handleNavigation(form, formWrapper, navAction);
      });
    } else {
      console.warn(`Form not found for outside navigation button: ${formName}`);
    }
  });

  /////
  // Function to get URL parameter value
  function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    const results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  }

  // Get the 'container' parameter value from the URL
  const containerValue = getUrlParameter('container');

  if (containerValue) {
    // Find all select elements with name 'container-type'
    const selectElements = document.querySelectorAll('select[name="container-type"]');

    selectElements.forEach(function (selectElement) {
      // Find the option with the matching id
      const optionToSelect = selectElement.querySelector('option[id="' + containerValue + '"]');

      if (optionToSelect) {
        // Select the option
        optionToSelect.selected = true;
      }
    });
  }
});