const username_field = document.querySelector('#username');
const password_field = document.querySelector('#password');
const v_password_field = document.querySelector('#v_password');
const submit_button = document.querySelector('input[type="submit"]');

const err_username = document.querySelector('#err_username');
const err_match = document.querySelector('#err_match');
const err_length = document.querySelector('#err_length');
const err_num = document.querySelector('#err_num');

function handle_input() {
  const password = password_field.value;
  const v_password = v_password_field.value;
  if (password != v_password && v_password != '')
    err_match.innerText = 'Passwords do not match.';
  else
    err_match.innerText = '';


  if (password.length < 8)
    err_length.innerText = 'Password must be at least 8 characters long.';
  else
    err_length.innerText = '';

  const num_regex = /\d/;
  if (!num_regex.test(password))
    err_num.innerText = 'Password must have at least 1 digit.';
  else
    err_num.innerText = '';

  if (err_match.innerText == '' && err_length.innerText == '' && err_num.innerText == '' && err_username == '' && v_password != '')
    submit_button.disabled = false;
  else
    submit_button.disabled = true;
}

function handle_username() {
  const username = username_field.value;

  fetch('functions/user.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'form_id=create-account&username=' + username,
  })
    .then(response => {
      if (!response.ok) {
        console.log('Failed to check if username exists!');
      }

      return response.json(); // Parse response body as JSON
    })
    .then(data => {
      if (data['exists'] == 'True')
        err_username.innerText = 'Username is taken.';
      else
        err_username.innerText = '';
    });
}

username_field.addEventListener('blur', handle_username);
password_field.addEventListener('input', handle_input);
v_password_field.addEventListener('input', handle_input);
submit_button.disabled = true;