document.addEventListener('DOMContentLoaded', function() {
  const buttonTestConnection = document.querySelector('.js-validate-credentials');
  const validateCredentialsUrl = buttonTestConnection.dataset.url;
  const inputtoken = document.getElementsByClassName('js-rede_token');
  const viewPassword = document.getElementsByClassName('js-password-view');

  const inputPv = document.getElementsByClassName('js-rede_pv');
  const viewPv = document.getElementsByClassName('js-pv-view');


  let request = false;

  const credentialId = document.querySelector('input[name="rede_token"]');
  const credentialKey = document.querySelector('input[name="rede_pv"]');

  function handleAuthenticateButton() {
    if (!credentialId.value || !credentialKey.value) {
      buttonTestConnection.setAttribute('disabled', true);
    } else {
      buttonTestConnection.removeAttribute('disabled', true);
    }
  }

  handleAuthenticateButton();

  credentialId.addEventListener('change', handleAuthenticateButton);
  credentialKey.addEventListener('change', handleAuthenticateButton);

  function validateCredentials(e) {
    e.preventDefault();

    if (request) {
      return;
    }

    this.classList.add('btn-loading');
    this.disabled = true;

    request = true;
 
    window
      .axiosApi({
        method: 'get',
        url: validateCredentialsUrl,
        params: { rede_token: credentialId.value, rede_pv: credentialKey.value },
      })
      .then(({ data }) => {
        notificationMsg(data.message, data.type);
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.classList.remove('btn-loading');
        this.disabled = false;
        request = false;
      });
  }

  buttonTestConnection.addEventListener('click', validateCredentials);

  viewPassword.item(0).addEventListener('click', function(){
    let type = inputtoken.item(0).getAttribute('type') == 'text' ? 'password' : 'text';

    viewPassword.item(0).classList.remove(type == 'text'?'fa-eye':'fa-eye-slash' );
    viewPassword.item(0).classList.add(type ==  'password'?'fa-eye':'fa-eye-slash');
    inputtoken.item(0).setAttribute('type',type);
  });

  viewPv.item(0).addEventListener('click', function(){
    let type = inputPv.item(0).getAttribute('type') == 'text' ? 'password' : 'text';

    viewPv.item(0).classList.remove(type == 'text'?'fa-eye':'fa-eye-slash' );
    viewPv.item(0).classList.add(type ==  'password'?'fa-eye':'fa-eye-slash');
    inputPv.item(0).setAttribute('type',type);
  });

});
