// Agregar aquí el código javascript

// Dado un array de países (al menos diez), construir dinámicamente una lista en
// la página con todos ellos. Es decir: la lista de países no debe estar en el
// archivo html, sino como array en javascript, y a partir de este array se debe
// generar la lista.

// Agregar un campo de texto arriba de la lista para búsqueda. A
// medida que el usuario escribe, mostrar solo los países cuyo nombre contenga el
// texto ingresado (sin distinguir mayúsculas de minúsculas). Si el campo está
// vacío, mostrar todos.

// En ningún momento debemos modificar el array original, sino ir reconstruyendo
// la lista en el DOM con cada cambio del campo de búsqueda.


//  CREACION DE LA LISTA

//creamos las siguientes variables
let arrayPaises = ["Venezuela", "Jamaica", "Dinamarca", "Mongolia", "Singapur", "Vietnam", "Letonia", "Escocia", "Congo", "Argelia"] ; // array con los paises
let arrayPaisesMinusculas = arrayPaises.map(pais=>pais.toLowerCase()) //pasamos la lista a minusculas para evitar incompatibilidades
let ulPaises = document.createElement("ul"); // cramos la UL (hasta ahora sin items)
let input = document.createElement("input"); //creamos el input
let body = document.querySelector("body");  // asignamos a esta variable la etiqueta "body"

body.appendChild(input); // incorporamos el input al body
body.appendChild(ulPaises); // lo mismo con la UL vacia

//IMPORTANTE: este for se ececutara una sola vez al cargar la pagina para crear la lista
for (let pais of arrayPaises){ // recorremos los 10 paises originales con un "for"
    let liPais = document.createElement("li") //creamos el li
    liPais.textContent = pais // lo llenamos con el pais iterado de la lista
    ulPaises.appendChild(liPais) // y lo anexamos a la UL
}

input.addEventListener("keyup", () => { //creamos el listener que va a activase con cada "keyup" dentro del input
    
    ulPaises.innerHTML = ""; // lo primero que hace el listener es borrar la lista para que no se repitan los elementos que queremos agregar
    
    let busqueda = input.value.trim().toLocaleLowerCase() //texto ingresado en el input sin espacios y convertido a minusculas
    let arrayPaisesMin = arrayPaises.map(p => p.toLocaleLowerCase()) // convertimos la lista de paises en minusculas
    let arrayPaisesBusqueda = arrayPaisesMin.filter(pais => pais.includes(busqueda)); // almacenamos en variable los strings del array que coincidan con la busqueda

    for (let p of arrayPaisesBusqueda){ // iteramos las lista que contiene solamente los paises que coinciden con el input
        let liPais = document.createElement("li"); //creamos el li
        liPais.textContent = p.charAt(0).toUpperCase() + p.slice(1) ; // lo rellenamos con el pais iterado de la lista ya capitalizado 
        // (aclaracion: la siguiente linea de codigo "charAt(0).toUpperCase() + p.slice(1)" es una forma de capitalizar la palabra, equivalente al metodo capitalize() que se encuentra en python)
        ulPaises.appendChild(liPais) // lo anexamos
    }
})