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

export const form = (name, options = {}) => {
  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 hash = localStorage.getItem("form__lang");
  const getInput = () => {
    return getForm().querySelectorAll(".form-field");
  };

  const withoutCaptcha = getForm().hasAttribute("data-wihout-captcha");

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

    if (options.validate && typeof options.validate === "function") {
      const validationResult = options.validate(getForm());
      if (validationResult === false) {
        return;
      }
    }

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

    resetError();

    formData.append("landing_url", url.host + url.pathname);
    formData.append("referrer", 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");
    }

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

    Ajax("POST", getAction(), formData)
      .then((data) => {
        if (data.errors && Object.keys(data.errors).length > 0) {
          handle(data.errors, getForm(), getFormName());
          return;
        }

        if (data.success) {
          createEvent({ event: "saas_form_sent" });
          onSuccess();

          if (!options.onSuccess) {
            if (getSuccess()) {
              getSuccess().style.display = "flex";
              getForm().style.display = "none";

              setTimeout(() => {
                getSuccess().scrollIntoView({
                  behavior: "smooth",
                  block: "center",
                });
              }, 100);
            }
          }
        }
      })
      .catch(() => {
        if (getError()) {
          getError().style.display = "flex";
          getForm().style.display = "none";

          setTimeout(() => {
            getError().scrollIntoView({
              behavior: "smooth",
              block: "center",
            });
          }, 100);
        }
      })
      .finally(() => {
        if (getFormBtn()) {
          if (!withoutCaptcha) {
            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 = "flex";
    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 getForm().parentNode.querySelector(".form-success");
  };

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

  const linkSuccess = () => {
    return getSuccess()[0]?.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
    );
  }
};