/*
    Objetivos:
    - Listar Usuarios
    - Buscar usuarios por Nombre.
    - Mostar una alerta cuando se da click sobre un usuario con el nombre del usuario.
*/

var userListEl = document.querySelector('ul#userList');
var userSearchEl = document.querySelector('input#userSearch');
var users = [];

userSearchEl.oninput = () => {
    let search_string = userSearchEl.value;
  let result_users = [];

  users.forEach(function(user){
  console.log(user.name.indexOf(search_string));
    if(user.name.indexOf(search_string) != -1){
        result_users.push(user);
    }
  });

  renderUserList(result_users);
}

function fetchUsers() {
    return fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(array => {
            users = array;
            renderUserList(array);
        })
        /*
            [{
                "id": 1,
                "name": "Emmanuel Garcia",
                "email": "eagarcia@tiempodevelopment.com"
            }]
        */
        .then(json => console.log(json));
}


function renderUserList (list) {
    userListEl.innerHTML = '';
    list.forEach(function(user){
        let li = document.createElement('li');
        li.setAttribute('id', user.id);

        let text = user.name + ' ' + '(' + user.email + ')';
      li.appendChild(document.createTextNode(text));
      li.onclick = () => console.log(user.name);
    userListEl.appendChild(li);
    });

}

fetchUsers();
renderUserList();