import ValidateInput from "../../../../utils/ValidateInput";
import { Ajax } from "../../../../utils/Ajax";
import { handle } from "../../../../utils/ErrorHandler";
import { langArr } from "../saas2/LangArray";
import { createEvent } from "../../events";
import { getCookieByName } from "../../../cookie";

const Forms = (form, phones) => {
  if (!form) return;
  let hash = localStorage.getItem("form__lang");
  const formContent = form.querySelector(".formContent");
  const errorMessage = form.querySelector(".form-error");
  const successMessage = form.querySelector(".form-success");
  const stateForm = {
    init: false,
    error: false,
    actionUrl: form.action,
    name: form.dataset.form,
    agree: true,
    agreeError: [],
    recaptcha: true,
    recaptchaError: [],
    timerForm: form.dataset.form === "recoveryForm",
  };

  const url = new URL(window.location);
  const formCheckbox = form.querySelector('[data-form="agree"]');
  const submit = form.querySelector('[type="submit"]');
  const formError = form.querySelector(".errorMsg");
  const arrayInput = form.querySelectorAll("input");
  const arrayTextarea = form.querySelectorAll("textarea");

  arrayInput.forEach((item) => {
    if (item) {
      item.addEventListener("input", () => {
        stateForm.error = ValidateInput(item, item.id);
      });
    }
  });

  arrayTextarea.forEach((item) => {
    if (item && item.id === "message") {
      item.addEventListener("input", () => {
        stateForm.error = ValidateInput(item, item.id);
      });
    }
  });

  if (formCheckbox) {
    hash = localStorage.getItem("form__lang");
    stateForm.agree = false;
    stateForm.agreeError["agree"] = langArr["Required"][hash];
    formCheckbox.addEventListener("click", () => {
      hash = localStorage.getItem("form__lang");
      if (formCheckbox.classList.contains("checked")) {
        formCheckbox.classList.remove("checked");
        formCheckbox.checked = false;
        stateForm.agree = false;
        stateForm.agreeError["agree"] = langArr["Required"][hash];
      } else {
        stateForm.agreeError["agree"] = "";
        formCheckbox.classList.add("checked");
        formCheckbox.checked = true;
        stateForm.agree = true;
      }
      handle(stateForm.agreeError);
    });
  }

  submit.addEventListener("click", (e) => {
    e.preventDefault();
    //console.log('click!', getCookieByName('roistat_visit'));
    const data = new FormData(form);
    hash = localStorage.getItem("form__lang");

    const allFormFields = [...arrayInput, ...arrayTextarea];
    stateForm.error = ValidateInput(allFormFields);

    if (data.get("g-recaptcha-response").trim() === "") {
      stateForm.error = stateForm.error === true ? true : stateForm.error;
      stateForm.recaptcha = false;
      stateForm.recaptchaError["g-recaptcha-response"] =
        langArr["Required"][hash];
    } else {
      stateForm.recaptcha = true;
      stateForm.recaptchaError["g-recaptcha-response"] = "";
    }

    if (formCheckbox.classList.contains("checked")) {
      stateForm.agreeError["agree"] = "";
      stateForm.agree = true;
    } else {
      stateForm.agree = false;
      stateForm.agreeError["agree"] = langArr["Required"][hash];
    }
    handle(stateForm.recaptchaError);

    if (stateForm.error) {
      formError.classList.add("active");
      formError.innerHTML = langArr["EmptyFields"][hash];
    } else {
      formError.classList.remove("active");
      formError.innerHTML = "";
    }

    if (data.get("regionSelect")) {
      if (window.innerWidth <= 767) {
        data.set("region", data.get("regionSelect"));
      }
      data.delete("regionSelect");
    }

    if (data.get("rangeSelect")) {
      if (window.innerWidth <= 767) {
        data.set("range", data.get("rangeSelect"));
      }
      data.delete("rangeSelect");
    }

    if (data.get("optionsSelect")) {
      if (window.innerWidth <= 767) {
        data.set("options", data.get("optionsSelect"));
      }
      data.delete("optionsSelect");
    }

    data.append("landing_url", url.host + url.pathname);
    data.set("full_number", `${phones[0].getNumber()}`);
    data.set("lang_by_browser", hash || "en");

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

    if (data.get("phone")) {
      data.set("phone", data.get("full_number"));
    }

    if (data.get("full_number")) {
      data.delete("full_number");
    }

    if (data.get("message")) {
      data.set("launch_reason", data.get("message"));
      data.delete("message");
    }

    console.log(
      "saas_request/Form.js",
      "roistat_id",
      getCookieByName("roistat_visit")
    );
    data.set("roistat_id", getCookieByName("roistat_visit"));

    if (!stateForm.error && stateForm.agree && stateForm.recaptcha) {
      Ajax("POST", stateForm.actionUrl, data)
        .then((data) => {
          if (data.errors) {
            handle(data.errors);
            return;
          }

          if (data.ok) {
            createEvent({ event: "saas_form_sent" });
            successMessage.style.display = "flex";
            formContent.style.display = "none";
            const time = setTimeout(() => {
              location.reload();
              location.replace(location.href);
            }, 2000);
            clearTimeout(time);
          }
        })
        .catch(() => {
          if (errorMessage) {
            errorMessage.style.display = "flex";
            formContent.style.display = "none";
          }
        })
        .finally(() => {});
    } else {
      if (formCheckbox) {
        handle(stateForm.agreeError);
      }
    }
  });
};

export default Forms;