var app = {
  init: function() {
    console.log('app.init');

    var formElement = document.querySelector('#login-form');

    // On écoute les envois de formulaires et on redirige
    // vers la fonction handleFormSubmit
    formElement.addEventListener('submit', app.handleFormSubmit);

    // On écoute les focusout des éléments du formulaire et on redirige
    // vers la fonction borderInputs
    formElement.addEventListener('focusout', app.borderInputs);
  },

  borderInputs: function(event) {
    // event.target = Element ciblé par l'utilisateur
    if(event.target.value.length < 3) {
      // Erreur, donc on colore la bordure en rose/rouge
      event.target.style.borderColor = '#ff3860';
    } else {
      // Valide, donc on colore la bordure en vert
      event.target.style.borderColor = '#00d1b2';
    }
  },

  handleFormSubmit: function(event) {
    // On empêche l'action par défaut de l'envoi du formulaire
    event.preventDefault();

    // On vérifie les valeurs des inputs du formulaire
    app.checkInputs();
  },

  checkInputs: function() {
    // On récupère toutes les valeurs des inputs
    var inputUsername = document.querySelector('#field-username').value;
    var inputPassword = document.querySelector('#field-password').value;

    // On stock ces valeurs dans un tableau "inputs"
    var inputs = [inputUsername, inputPassword];

    // On créé un autre tableau qui servira pour vérifier si on doit
    // envoyer le formulaire ou non, après vérification
    var inputsVerif = [];

    // On supprime le contenu de l'ID errors, enlevant ainsi les erreurs précédentes
    document.querySelector('#errors').innerHTML = '';

    // On boucle pour tous les inputs du formulaire
    for(var index = 0; index<2; index += 1) {
      // On vérifie que les valeurs des inputs sont correct
      if(inputs[index].length < 3) {
        // Dans le cas où ce n'est pas correct :

        // On créé un élément de type "DIV" qui sera inséré plus tard dans la page/DOM
        var newDiv = document.createElement('div');

        // On définit le contenu textuel de l'élément (via .textContent)
        newDiv.textContent = "Username a moins de 3 caractères";

        // On insert dans le DOM l'élément qu'on a créé et défini,
        // puis on lui ajoute une class "error" avec .classList
        document.querySelector('#errors').appendChild(newDiv).classList.add("error");

        // On modifie la case du tableau en false pour empêcher
        // l'envoi du formulaire
        inputsVerif[index] = false;
      } else {
        // Dans le cas où la valeur est correcte :

        // On modifie la case du tableau en true pour
        // dire que l'input est valide et est prêt à être envoyé
        inputsVerif[index] = true;
      }
    }

    // On s'assure que les deux inputs ont retourné "true" dans le tableau
    if(inputsVerif[0] == true && inputsVerif[1] == true) {
      // Si toutes les cases du tableau retournent "true" : Formulaire valide

      // On réinitialise les valeurs des inputs
      document.querySelector('#field-username').value = '';
      document.querySelector('#field-password').value = '';

      // On enlève les bordures vertes/roses des inputs
      document.querySelector('#field-username').style.border = '';
      document.querySelector('#field-password').style.border = '';

      // document.querySelectorAll('.field-input').style.border = '1px solid #ccc'; // <- Provoque une erreur
    }


    /* // Ancienne logique, modifiée avec l'arrivée de la boucle for
    if(inputUsername.length < 3) {
      // On créé un élément de type "DIV" qui sera inséré plus tard dans la page/DOM
      var newDiv = document.createElement('div');

      // On définit le contenu textuel de l'élément (via .textContent)
      newDiv.textContent = "Username a moins de 3 caractères";

      // On insert dans le DOM l'élément qu'on a créé et défini,
      // puis on lui ajoute une class "error" avec .classList
      document.querySelector('#errors').appendChild(newDiv).classList.add("error");
    }

    if(inputPassword.length < 3) {
      var newDiv = document.createElement('div');
      newDiv.textContent = "Password a moins de 3 caractères";
      document.querySelector('#errors').appendChild(newDiv).classList.add("error");
    }
    */
  }


};

document.addEventListener('DOMContentLoaded', app.init);