const sections = [
  "signupEmailSection",
  "signupNameSection",
  "signupEmailOtpSection",
  "signupPhoneSection",
  "signupPhoneOtpSection",
];
let timer = undefined;

let currentSectionIndex = 0;

const onSignupEmailSubmit = (event) => {
  event.preventDefault();
  const emailElem = document.querySelector("#signupEmailInput");
  const checkboxElem = document.querySelector("#signupAcceptTermsCheckbox");
  const enteredEmail = emailElem?.value || "";
  if (!emailValidation(enteredEmail)) {
    emailElem.style.outline = "2px solid #f34213";
    emailElem.nextElementSibling.innerHTML = "Invalid Email";
  } else if (
    !passwordValidation(
      document.querySelector("#signupPasswordInput")?.value || ""
    )
  ) {
    document.querySelector("#signupPasswordInput").style.outline =
      "2px solid #f34213";
    document.querySelector(
      "#signupPasswordInput"
    ).nextElementSibling.innerHTML =
      "Should be between 8-30 characters and must contain at least one lowercase, uppercase, number and symbol.";
  } else if (!checkboxElem.checked) {
    checkboxElem.style.outline = "2px solid #f34213";
  } else {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    const urlencoded = new URLSearchParams();
    urlencoded.append("email", enteredEmail);
    urlencoded.append(
      "password",
      document.querySelector("#signupPasswordInput")?.value || ""
    );
    urlencoded.append("terms_accepted", checkboxElem?.checked || false);

    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: urlencoded,
      redirect: "follow",
    };
    fetch(`${getApiLink()}/api/signup/signup_create_user.php`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.success) {
          emailElem.value = "";
          localStorage.setItem("token", result.data.token);
          switchSection(1);
        } else {
          createAlertMessage("signup__alert_message", result);
        }
      })
      .catch((error) => console.error(error));
  }
};

const onSignupNameSubmit = (event) => {
  event.preventDefault();
  const fnameInput = document.querySelector("#signupFirstNameInput");
  const lnameInput = document.querySelector("#signupLastNameInput");
  if (!(fnameInput.value.trim().length > 0)) {
    fnameInput.style.outline = "2px solid #f34213";
  } else if (!(lnameInput.value.trim().length > 0)) {
    lnameInput.style.outline = "2px solid #f34213";
  } else {
    let fname = fnameInput.value.trim();
    let lname = lnameInput.value.trim();

    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append("Authorization", localStorage.getItem("token"));

    const urlencoded = new URLSearchParams();
    urlencoded.append("fname", fname);
    urlencoded.append("lname", lname);

    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: urlencoded,
      redirect: "follow",
    };

    fetch(`${getApiLink()}/api/signup/signup_add_name.php`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.success) {
          fnameInput.value = "";
          lnameInput.value = "";
          const emailPlaceholder = document.querySelector("#signupUserEmail");
          emailPlaceholder.innerHTML = result.data.email;
          switchSection(2);
          timer = setTimer(
            "signup__email_otp_countdown",
            "signup__resend_email_otp"
          );
        } else {
          createAlertMessage("signup__alert_message", result);
        }
      })
      .catch((error) => console.error(error));
  }
};

document.addEventListener("DOMContentLoaded", function () {
  localStorage.removeItem("token");
  document
    .querySelector("#signupAcceptTermsCheckbox")
    .addEventListener("change", (event) => {
      event.currentTarget.style.outline = "none";
    });
  initPhoneInput();
});

const onSignupEmailOtpSubmit = (event) => {
  event.preventDefault();
  const otpElem = document.querySelector("#signupEmailOtpInput");
  const otp = otpElem.value;
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  myHeaders.append("Authorization", localStorage.getItem("token"));

  const urlencoded = new URLSearchParams();
  urlencoded.append("otp", otp);

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: urlencoded,
    redirect: "follow",
  };

  fetch(`${getApiLink()}/api/signup/signup_validate_email.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        otpElem.value = "";
        localStorage.setItem("token", result.data.token);
        switchSection(3);
      } else {
        createAlertMessage("signup__alert_message", result);
      }
    })
    .catch((error) => console.error(error));
};

const onResendEmailOtp = () => {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  myHeaders.append("Authorization", localStorage.getItem("token"));

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    redirect: "follow",
  };

  fetch(`${getApiLink()}/api/services/resend_email_otp.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        timer = setTimer(
          "signup__email_otp_countdown",
          "signup__resend_email_otp"
        );
      } else {
        createAlertMessage("signup__alert_message", result);
      }
    })
    .catch((error) => console.error(error));
};

const onSignupPhoneSubmit = (event) => {
  event.preventDefault();
  const phoneInput = document.querySelector("#signupPhoneInput");
  if (numberValidation(phoneInput.value).valid) {
    const phoneInput = document.querySelector("#signupPhoneInput");
    const enteredPhone = phoneInput.value.trim().replaceAll(" ", "");

    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append("Authorization", localStorage.getItem("token"));

    const urlencoded = new URLSearchParams();
    urlencoded.append("phone", enteredPhone);

    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: urlencoded,
      redirect: "follow",
    };
    fetch(`${getApiLink()}/api/signup/signup_add_phone.php`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.success) {
          if (result.data.is_phone_verification_needed) {
            phoneInput.value = "";
            const emailPlaceholder = document.querySelector("#signupUserPhone");
            emailPlaceholder.innerHTML = result?.data?.phone || enteredPhone;
            switchSection(4);
            timer = setTimer(
              "signup__phone_otp_countdown",
              "signup__resend_phone_otp"
            );
          } else {
            localStorage.setItem("token", result?.data?.token || "");
            redirectToPage(result?.data?.token || "");
          }
        } else {
          createAlertMessage("signup__alert_message", result);
        }
      })
      .catch((error) => console.error(error));
  } else {
    phoneInput.style.outline = "2px solid #f34213";
  }
};

const onResendPhoneOtp = () => {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  myHeaders.append("Authorization", localStorage.getItem("token"));

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    redirect: "follow",
  };

  fetch(`${getApiLink()}/api/services/resend_phone_otp.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        timer = setTimer(
          "signup__phone_otp_countdown",
          "signup__resend_phone_otp"
        );
      } else {
        createAlertMessage("signup__alert_message", result);
      }
    })
    .catch((error) => console.error(error));
};

const switchSection = (index) => {
  sections.forEach((sectionId, idx) => {
    if (document.getElementById(sectionId)) {
      if (idx != index)
        document.getElementById(sectionId).style.display = "none";
      else document.getElementById(sectionId).style.display = "block";
    }
    if (index == 0) {
      document.querySelector(".signup__back_icon").style.display = "none";
    } else {
      document.querySelector(".signup__back_icon").style.display = "block";
    }
  });

  currentSectionIndex = index;
};

const onBackClick = () => {
  document.querySelector("#signupPhoneOtpInput").value = "";
  document.querySelector("#signupEmailOtpInput").value = "";
  document.querySelectorAll(".signup__message").forEach((item) => {
    item.innerHTML = "";
  });
  switchSection(currentSectionIndex - 1);
};

const onVerifyPhoneSignup = (event) => {
  event.preventDefault();
  const otp = document.querySelector("#signupPhoneOtpInput").value;
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  myHeaders.append("Authorization", localStorage.getItem("token"));

  const urlencoded = new URLSearchParams();
  urlencoded.append("otp", otp);

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: urlencoded,
    redirect: "follow",
  };

  fetch(`${getApiLink()}/api/signup/signup_validate_phone.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        localStorage.setItem("token", result?.data?.token || "");
        redirectToPage(result?.data?.token || "");
      } else {
        createAlertMessage("signup__alert_message", result);
      }
    })
    .catch((error) => console.error(error));
};

const onEnterNewPhoneNumber = () => {
  if (timer) clearInterval(timer);
  switchSection(3);
};

const onEnterNewEmail = () => {
  if (timer) clearInterval(timer);
  switchSection(0);
};