const serverUrl = 'http://localhost:3088/';
const emailInputEl = document.getElementById('email');
const passwordInputEl = document.getElementById('password');
const emailErrEl = document.getElementById('emailErrMsg');
const passwordErrEl = document.getElementById('passwordErrMsg');

document.getElementById('passwordBox').style.display = 'none';

function showPasswordBox() {
  const email = emailInputEl.value;
  if (email.includes('@')) {
    document.getElementById('emailBox').style.display = 'none';
    document.getElementById('passwordBox').style.display = 'block';
    document.getElementById('entered-email').innerHTML = email;
    emailInputEl.classList.remove('error');
    emailErrEl.innerText = '';
  } else {
    emailInputEl.classList.add('error');
    emailErrEl.innerText = 'Please enter valid email';
  }
}

function togglePassword() {
  const ele = document.getElementById('showPassword');
  const password = passwordInputEl;

  if (password.value.length > 0) {
    passwordInputEl.value = password.value;
    password.focus();
    if (ele.checked) {
      password.setAttribute('type', 'text');
    } else {
      password.setAttribute('type', 'password');
    }
  }
}

function onPasswordFocus() {
  if (passwordInputEl.value.length > 0) {
    document.getElementById('password-label').classList.add('password-fixed');
  } else {
    document
      .getElementById('password-label')
      .classList.remove('password-fixed');
  }
}

function setCookie(name, value, days) {
  var expires = '';
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = '; expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + (value || '') + expires + '; path=/';
}

function loginUser(email, password) {
  const postData = JSON.stringify({
    UserName: email,
    Password: password,
    UnibaseId: '',
    RememberMe: false,
  });

  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: postData,
    redirect: 'follow',
  };

  fetch(serverUrl + 'account/login', requestOptions)
    .then((response) => response.text())
    .then((result) => {
      const user = JSON.parse(result);
      setCookie('authentication', user.result.sessionId, 1);
      window.location = '../authentication';
    })
    .catch((error) => console.log('error', error));
}

function validateLogin() {
  const email = emailInputEl.value;
  const password = passwordInputEl.value;
  if (email.includes('@') && password.trim().length !== 0) {
    loginUser(email, password);
  } else if (!email.includes('@')) {
    emailErrEl.innerHTML = 'Please enter valid email';
  } else {
    passwordInputEl.classList.add('error');
    passwordErrEl.innerText = 'Please enter valid password';
  }
}

function initializeEventListeners() {
  document.getElementById('emailNextBtn').addEventListener('click', () => {
    showPasswordBox();
  });

  document.getElementById('showPassword').addEventListener('click', () => {
    togglePassword();
  });

  document.getElementById('showPassword').addEventListener('onfocusout', () => {
    onPasswordFocus();
  });

  document.getElementById('loginSubmitBtn').addEventListener('click', () => {
    validateLogin();
  });
}

initializeEventListeners();