/*
 * https://frontendeval.com/questions/multi-step-form
 *
 * Create a single submittable form that spans multiple screens
 */
const nameForm = document.getElementById("name-form");
const emailForm = document.getElementById("email-form");
const dobForm = document.getElementById("dob-form");
const passwordForm = document.getElementById("password-form");

const name = document.getElementById("name");
const email = document.getElementById("email");
const dob = document.getElementById("dob");
const password = document.getElementById("password");

const nameButton = document.getElementById("submit-name");
const emailButton = document.getElementById("submit-email");
const dobButton = document.getElementById("submit-dob");
const passwordButton = document.getElementById("submit-password");

const nameError = document.getElementById("name-error");
const emailError = document.getElementById("email-error");
const dobError = document.getElementById("dob-error");
const passwordError = document.getElementById("password-error");

const emailBack = document.getElementById("email-back");
const dobBack = document.getElementById("dob-back");
const passwordBack = document.getElementById("password-back");

nameButton.addEventListener("click", () => {
  if (!name.value) {
    nameError.textContent = "Enter name to proceed.";
    return;
  }
  nameError.textContent = "";
  nameForm.classList.add("hidden");
  emailForm.classList.remove("hidden");
});

emailButton.addEventListener("click", () => {
  if (!email.value) {
    emailError.textContent = "Enter email to proceed.";
    return;
  }
  if (!email.value.includes("@")) {
    emailError.textContent = "Email address is not valid.";
    return;
  }
  emailError.textContent = "";
  emailForm.classList.add("hidden");
  dobForm.classList.remove("hidden");
});

dobButton.addEventListener("click", () => {
  if (!dob.value) {
    dobError.textContent = "Enter date of birth to proceed.";
    return;
  }
  dobError.textContent = "";
  dobForm.classList.add("hidden");
  passwordForm.classList.remove("hidden");
});

passwordButton.addEventListener("click", () => {
  if (!password.value) {
    passwordError.textContent = "Enter password to proceed.";
    return;
  }
  if (password.value.length < 8) {
    passwordError.textContent = "Password should have atleast 8 characters.";
    return;
  }
  passwordError.textContent = "";
  dobForm.classList.add("hidden");
  handleSubmit({
    name: name.value,
    email: email.value,
    dob: dob.value,
    password: password.value
  });
});

const handleSubmit = (userInfo) => {
  console.log("Name: ", userInfo.name);
  console.log("Email: ", userInfo.email);
  console.log("Date of Birth: ", userInfo.dob);
  console.log("Password: ", userInfo.password);
};

emailBack.addEventListener("click", () => {
  nameForm.classList.remove("hidden");
  emailForm.classList.add("hidden");
});

dobBack.addEventListener("click", () => {
  emailForm.classList.remove("hidden");
  dobForm.classList.add("hidden");
});

passwordBack.addEventListener("click", () => {
  dobForm.classList.remove("hidden");
  passwordForm.classList.add("hidden");
});