const sections = [
  "loginEmailSection",
  "loginEmailOtpSection",
  "loginNameSection",
  "loginPhoneSection",
  "loginPhoneOtpSection",
];
let currentSectionIndex = 0;
let timer = undefined;

if (
  localStorage.getItem("loginMessageRedirect") &&
  localStorage.getItem("loginMessageRedirect") != ""
) {
  setMessage(
    "login__redirect_from_signup",
    localStorage.getItem("loginMessageRedirect")
  );
  localStorage.removeItem("loginMessageRedirect");
} else {
  localStorage.removeItem("loginMessageRedirect");
}

const onLoginEmailSubmit = (event) => {
  event.preventDefault();
  const emailElem = document.querySelector("#loginEmailInput");
  const enteredEmail = emailElem?.value || " your email";
  if (!emailValidation(enteredEmail)) {
    emailElem.style.outline = "2px solid #f34213";
  } else if (
    !passwordValidation(document.querySelector("#loginPasswordInput").value)
  ) {
    document.querySelector("#loginPasswordInput").style.outline =
      "2px solid #f34213";
  } else {
    const emailPlaceholder = document.querySelector("#loginUserEmail");
    emailPlaceholder.innerHTML = enteredEmail;
    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("#loginPasswordInput")?.value || ""
    );

    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: urlencoded,
      redirect: "follow",
    };
    fetch(`${getApiLink()}/api/login/login_verify.php`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.success) {
          emailElem.value = "";
          document.querySelector("#loginPasswordInput").value = "";
          localStorage.setItem("token", result.data.token);
          switchSection(1);
          timer = setTimer("login__email_otp_countdown", "login__resend_email_otp");
        } else {
          createAlertMessage("login__alert_container", result);
        }
      })
      .catch((error) => console.error(error));
  }
};

const onLoginEmailOtpSubmit = (event) => {
  event.preventDefault();
  const otpElem = document.querySelector("#loginEmailOtpInput");
  if (otpElem.value.length != 6) return;
  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", otpElem.value.trim());

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: urlencoded,
    redirect: "follow",
  };
  fetch(`${getApiLink()}/api/login/login_validate.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        otpElem.value = "";
        localStorage.setItem("token", result?.data?.token || "");
        if (result.status == "name_not_set") {
          switchSection(2);
        } else if (result.status == "phone_not_set") {
          switchSection(3);
        } else {
          redirectToPage(result?.data?.token || "");
        }
      } else {
        createAlertMessage("login__alert_container", result);
        loginOtpError = true;
      }
    })
    .catch((error) => console.error(error));
};

const onLoginNameSubmit = (event) => {
  event.preventDefault();
  const fnameInput = document.querySelector("#loginFirstNameInput");
  const lnameInput = document.querySelector("#loginLastNameInput");
  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 {
    const fname = fnameInput.value.trim();
    const 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/login/login_add_name.php`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.success) {
          fnameInput.value = "";
          lnameInput.value = "";
          switchSection(3);
        } else {
          createAlertMessage("login__alert_container", result);
        }
      })
      .catch((error) => console.error(error));
  }
};

document.addEventListener("DOMContentLoaded", function () {
  localStorage.removeItem("token");
  initPhoneInput()
});

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("login__email_otp_countdown", "login__resend_email_otp");
      } else {
        createAlertMessage("login__alert_container", result);
      }
    })
    .catch((error) => console.error(error));
};

const onLoginPhoneSubmit = (event) => {
  event.preventDefault();
  const phoneInput = document.querySelector("#loginPhoneInput");
  if (numberValidation(phoneInput.value).valid) {
    const phoneInput = document.querySelector("#loginPhoneInput");
    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/login/login_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("#loginUserPhone");
            emailPlaceholder.innerHTML = result?.data?.phone || enteredPhone;
            switchSection(4);
            timer = setTimer("login__phone_otp_countdown", "login__resend_phone_otp");
          } else {
            localStorage.setItem("token", result?.data?.token || "");
            redirectToPage(result?.data?.token || "");
          }
        } else {
          createAlertMessage("login__alert_container", 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("login__phone_otp_countdown", "login__resend_phone_otp");
      } else {
        createAlertMessage("login__alert_container", 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(".login__back_icon").style.display = "none";
    } else {
      document.querySelector(".login__back_icon").style.display = "block";
    }
  });

  currentSectionIndex = index;
};

const onBackClick = () => {
  document.querySelector("#loginPhoneOtpInput").value = "";
  document.querySelector("#loginEmailOtpInput").value = "";
  document.querySelectorAll(".login__message").forEach((item) => {
    item.innerHTML = "";
  });
  switchSection(currentSectionIndex - 1);
};

const onVerifyPhoneLogin = (event) => {
  event.preventDefault();
  const otpElem = document.querySelector("#loginPhoneOtpInput");
  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);
  urlencoded.append("otp", otpElem?.value || "");

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

  fetch(`${getApiLink()}/api/login/login_validate_phone.php`, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        otpElem.value = "";
        if (result.status == "token_found") {
          localStorage.setItem("token", result?.data?.token || "");
          redirectToPage(result?.data?.token || "");
        } else {
          localStorage.setItem(
            "loginMessageRedirect",
            "Account created successfully, continue to login."
          );
        }
      } else {
        createAlertMessage("login__alert_container", result);
      }
    })
    .catch((error) => console.error(error));
};

const onForgotPassword = () => {
  const popup = document.createElement("popup-element");
  popup.setAttribute("data-header", "Forgot Password");
  popup.innerHTML = /*html*/ `
      <div class='login__profile_rstpwd_inputs'>
        <input-element
          data-label="Email"
          data-type="text"
          data-padding="0"
          data-id="loginProfileEmail"
          data-validation="_email";
          data-class="login__popup_input"
        ></input-element>
      </div>
      <div class="login__reset_pwd_message"></div>
      <div class="_popup_button login_reset_pwd_button">
        <button-element
          data-label="Confirm"
          data-id="loginProfileConfButton"
        ></button-element>
      </div>
    `;

  const loginContainer = document.querySelector(".login__popup_container");
  loginContainer.innerHTML = "";
  loginContainer.appendChild(popup);

  document
    .querySelector("#loginProfileConfButton")
    .addEventListener("click", (e) => {
      if (
        !emailValidation(document.querySelector("#loginProfileEmail")?.value)
      ) {
        createAlertMessage(
          "login__alert_container",
          null,
          "Invalid Email, please check the email"
        );
      } else {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

        const urlencoded = new URLSearchParams();
        urlencoded.append(
          "email",
          document.querySelector("#loginProfileEmail").value
        );

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

        fetch(`${getApiLink()}/api/login/forgot_password.php`, requestOptions)
          .then((response) => response.json())
          .then((result) => {
            if (result.success) {
              const inputs = document.querySelectorAll(
                ".login__profile_rstpwd_inputs ._input_text"
              );
              inputs.forEach((item) => {
                item.readOnly = true;
              });
              const otpElem = document.createElement("input-element");
              otpElem.setAttribute("data-validation", "_otp");
              otpElem.setAttribute("data-class", "login__popup_input");

              otpElem.setAttribute("data-type", "number");
              otpElem.setAttribute("data-id", "loginResetPwdOtpInput");
              otpElem.setAttribute("data-label", "Enter OTP");
              document
                .querySelector(".login__profile_rstpwd_inputs")
                .appendChild(otpElem);

              const btnElem = document.querySelector(".login_reset_pwd_button");
              btnElem.innerHTML = "";
              const btn = document.createElement("button-element");
              btn.setAttribute("data-label", "Verify OTP");
              btn.setAttribute("data-id", "loginResetPasswordVerifyOtp");
              btn.addEventListener("click", () => {
                if (
                  document.querySelector("#loginResetPwdOtpInput")?.value &&
                  document.querySelector("#loginResetPwdOtpInput").value
                    .length == OTP_LENGTH
                ) {
                  const myHeaders = new Headers();
                  myHeaders.append(
                    "Content-Type",
                    "application/x-www-form-urlencoded"
                  );

                  const urlencoded = new URLSearchParams();
                  urlencoded.append(
                    "email",
                    document.querySelector("#loginProfileEmail").value
                  );
                  urlencoded.append(
                    "otp",
                    document.querySelector("#loginResetPwdOtpInput").value
                  );

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

                  fetch(
                    `${getApiLink()}/api/login/forgot_password_validate.php`,
                    requestOptions
                  )
                    .then((response) => response.json())
                    .then((result) => {
                      if (result.success) {
                        createAlertMessage(
                          "login__alert_container",
                          null,
                          "Invalid OTP"
                        );

                        localStorage.setItem(
                          "loginMessageRedirect",
                          "Link has been sent successfully to your email to reset your password."
                        );
                        window.location.href = "/login";
                      }
                    })
                    .catch((error) => console.error(error));
                } else {
                  createAlertMessage(
                    "login__alert_container",
                    null,
                    "Invalid OTP"
                  );
                }
              });
              btnElem.appendChild(btn);
            } else {
              createAlertMessage("login__alert_container", result);
            }
          })
          .catch((error) => console.error(error));
      }
    });
};

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

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