import "./register.scss";

/**
 * @param {HTMLElement} section
 */
export function registerPage(section) {
  populate_favorites();
  input_validation();
}

function populate_favorites() {
  var input = document.getElementById("serialized-favorites");
  var favorites = localStorage.getItem("favorites");
  var to_serialize = [];
  if (input && favorites) {
    var artists = favorites.split(",");
    artists.forEach(function (artist) {
      var split = artist.split(":");
      if (split.length != 2) {
        return;
      }
      var elem = {
        service: split[0],
        artist_id: split[1],
      };
      to_serialize.push(elem);
    });
    var serialized = JSON.stringify(to_serialize);
    input.value = serialized;
  }
}


function input_validation() {
  const USERNAME_INPUT = () => document.getElementById("new-username");
  const PASSWORD_INPUT = () => document.getElementById("new-password");
  const PASSWORD_CONFIRM_INPUT = () => document.getElementById("password-confirm");
  const SUBMIT_BUTTON = () => document.getElementById("submit");

  const USER_CHAR_COUNT = () => document.getElementById("username-char-count");
  const ALLOWED_CHARS = () => document.getElementById("username-allowed-characters");
  const PASS_CHAR_COUNT = () => document.getElementById("password-char-count");
  const PASSWORD_CONFIRM = () => document.getElementById("password-confirm-matches");

  const USERNAME_PAT = new RegExp("^" + document.getElementById("register_form").dataset["pattern"] + "$");
  const NOT_ALLOWED_CHARS_PAT = new RegExp(`[^a-z0-9_@+.\-]`, 'g');

  function validateInputs(e) {
    let errors = false;
    let username = USERNAME_INPUT().value;
    let password = PASSWORD_INPUT().value;
    let passwordConfirmation = PASSWORD_CONFIRM_INPUT().value;

    if (username.length < 3 || username.length > 15) {
      errors = true;
      USER_CHAR_COUNT().classList.add("invalid");
    } else {
      USER_CHAR_COUNT().classList.remove("invalid");
    }

    if (!username.match(USERNAME_PAT)) {
      errors = true;
      ALLOWED_CHARS().classList.add("invalid");
    } else {
      ALLOWED_CHARS().classList.remove("invalid");
    }

    if (password.length < 5) {
      errors = true;
      PASS_CHAR_COUNT().classList.add("invalid");
    } else {
      PASS_CHAR_COUNT().classList.remove("invalid");
    }

    if (passwordConfirmation !== password || passwordConfirmation === "") {
      errors = true;
      PASSWORD_CONFIRM().classList.add("invalid");
    } else {
      PASSWORD_CONFIRM().classList.remove("invalid");
    }

    SUBMIT_BUTTON().disabled = errors;
  }

  window.addEventListener("load", (_event) => {
    USERNAME_INPUT().textContent = USERNAME_INPUT().textContent.toLowerCase().replace(NOT_ALLOWED_CHARS_PAT, "");
    validateInputs();
    USERNAME_INPUT().addEventListener("input", validateInputs);
    USERNAME_INPUT().addEventListener("input", (input) => {
      input.target.value = input.target.value.toLowerCase().replace(NOT_ALLOWED_CHARS_PAT, "");
    });
    PASSWORD_INPUT().addEventListener("input", validateInputs);
    PASSWORD_CONFIRM_INPUT().addEventListener("input", validateInputs);
  });

}
