// Agregar a la página un botón y un párrafo que diga Botón clickeado 0 veces. 
// Cada vez que se haga clic en el botón, el texto del párrafo debe cambiar al mensaje
//  "Botón clickeado N veces", donde N es el número de veces que se hizo clic.

let botonClicks = document.querySelector('#boton-clicks'); // almacenamos en las variables el elemento boton y el span con id numero
let spanNumero = (document.querySelector('#numero-clicks'));

let numeroClicks = parseInt(spanNumero.textContent) // extraemos solamente el textcontent y lo almacenamos en otra variable

function contarClicks (){
    numeroClicks = numeroClicks+1;
    spanNumero.textContent = numeroClicks; //actualizamos el numero dentro del <span> con el nuevo textcontent
};

botonClicks.addEventListener('click', contarClicks); //ejecutamos la funcion 


// 2 Agregar un campo de texto a la página. A medida que el usuario escribe, mostrar en
//  tiempo real la cantidad de caracteres ingresados debajo del campo.

let label = document.querySelector("#label-ej2");
let cantidadLetras = 0

const campo = document.querySelector("#input-ej2");
campo.addEventListener("input", (e) => {
    cantidadLetras = e.target.value.length;
    label.textContent = cantidadLetras;
    });

    
// 3 Crear una lista con cinco ítems. Usando delegación de eventos,
//  hacer que al hacer clic en cualquier ítem se le agregue la clase "seleccionado"
//  y se la quite a los demás (es decir, solo un ítem puede estar seleccionado a la vez).

let ulPaises = document.querySelector('#lista-paises'); // aignamos la ul en una variable
let arrayPaises = document.querySelectorAll('.pais'); // y los li en un array

ulPaises.addEventListener('click', (e) => {
    let paisElegido = e.target;
    let listaPaisesNoelegidos =[];

    paisElegido.classList.replace('pais', 'seleccionado'); //cambiamos la clase del pais seleccionado

    console.log(paisElegido.classList);
    for (let item of arrayPaises){
        if (item.classList != 'seleccionado'){
            item.remove();
        }
    }

})

// 4 Agregar a la página los siguientes elementos:
// <div id="externo">
//     <div id="interno">
//         <button>Click</button>
//     </div>
// </div>

// Registrar listeners de bubbling en los tres elementos y verificar 
// en consola el orden en que se ejecutan al hacer clic en el botón. 
// Luego, agregar un listener de capturing en #externo y observar cómo cambia el orden.


let divExterno = document.querySelector('#externo');
let divInterno = document.querySelector('#interno');
let boton = document.querySelector('#boton');

divExterno.addEventListener('click' , () =>{
    console.log('externo (primero)')
}, true);

divInterno.addEventListener('click' , () =>{
    console.log('Interno (tercero)')
});

boton.addEventListener('click' , () =>{
    console.log('boton (segundo)')
});

// con el tercer argumento true en el listener del div externo el orden queda asi:
// 1ro - divExterno / 2do - boton / 3ro - divInterno /



// 5 Crear un formulario con los campos nombre, edad y mensaje (textarea). Al enviarlo:

//     Verificar que ningún campo esté vacío.
//     Verificar que la edad sea un número entero positivo, menor que 120.
//     Si hay errores, mostrarlos en la página junto al campo correspondiente.
//     Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.

// Para limpiar un campo se puede asignar un string vacío a su propiedad value:

// document.querySelector("#nombre").value = "";

let nombre  = document.querySelector('#nombre'); // almacenamos en variables los elementos html que necesitamos
let edad = document.querySelector('#edad');
let mensaje = document.querySelector('textarea');
let enviar = document.querySelector('#enviar');
let form = document.querySelector('form')

form.addEventListener('submit' , (e) =>{ //creamos el listener previniendo el refresh de la pagina
    e.preventDefault();

    if (nombre.value.trim() === '') { //si el nombre esta vacio => mensaje error
        document.querySelector('#error-nombre').textContent = 'El nombre no puede estar vacio';
        
    } else if (edad.value > 120 || edad.value < 0 || edad.value === ""){ // en este else if recibimos todos los errores para despues desglosarlo 
        if(edad.value > 120 || edad.value < 0){ // si: el numero es negativo o mayor a 120 => "edad invalida"
            document.querySelector('#error-edad').textContent = 'edad invalida';
        }
        else if (edad.value === ""){ // si la edad esta vacia => error
            document.querySelector('#error-edad').textContent = 'El campo "edad" no puede estar vacio';
        }
        
        
    } else if (mensaje.value.trim() === ''){ // si el mensaje esta vacio => error
        document.querySelector('#error-mensaje').textContent = 'El mensaje no puede estar vacio';
         }

    if (!(nombre.value.trim() === '' || edad.value > 120 || edad.value < 0 || edad.value === "" || mensaje.value.trim() === '')){ // Si se umplen TODAS las condiciones neesarias => "formulario enviaro"
        alert("Formulario enviado"); 
        document.querySelector("#nombre").value = ""; // borramos todos los valores en blanco al recibir el mensaje de envio de formulario
        document.querySelector("#error-nombre").textContent = "";
        document.querySelector("#edad").value = "";
        document.querySelector("#error-edad").textContent = "";
        document.querySelector("#mensaje").value = "";
        document.querySelector("#error-mensaje").textContent = "";
        return;
    }
    


    
});