(() => {
  const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

  // TOGGLE ERROR STATE
  function toggleError(el, isError) {
    const wrap = el.closest(".field-wrap");
    if (!wrap) return;

    const label = wrap.querySelector(".label-invalid");

    el.classList.toggle("is-error", isError);
    if (label) {
      label.classList.toggle("anim", !isError);
    }
  }

  function validate(field) {
    if (!field.required) return true;

    const value = field.value.trim();
    let valid = true;

    // Email validation
    if (field.tagName === "INPUT" && field.type === "email") {
      valid = emailRegex.test(value);
    } else {
      valid = !!value;
    }

    toggleError(field, !valid);
    return valid;
  }

  // VALIDATE FORM
  function validateForm(form) {
    let valid = true;

    form
      .querySelectorAll("input[required], textarea[required]")
      .forEach((field) => {
        if (!validate(field)) valid = false;
      });

    return valid;
  }

  // FORM SUBMISSION HANDLING
  let lock = false;

  document.querySelectorAll("[data-submit-btn]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const form = btn.closest("form");
      if (!form) return;

      const submit = form.querySelector('input[type="submit"]');
      if (!submit) return;

      if (lock) return;

      const isValid = validateForm(form);

      if (isValid) {
        lock = true;
        btn.classList.add("is-disabled");

        setTimeout(() => {
          lock = false;
          btn.classList.remove("is-disabled");
        }, 2000);

        submit.click();
      }
    });
  });

  // validate on input change if field has error
  document.querySelectorAll("form").forEach((form) => {
    form.addEventListener("input", (e) => {
      if (e.target.classList.contains("is-error")) {
        validate(e.target);
      }
    });
  });
})();