// // Agregar aquí el código javascript

// Construir dinámicamente una tabla HTML con una fila por empleado. Agregar una
// fila al final que muestre el sueldo promedio del total de empleados.

const empleados = [
    { nombre: "Ana", sector: "Desarrollo", sueldo: 150000 },
    { nombre: "Luis", sector: "Diseño", sueldo: 120000 },
    { nombre: "Marta", sector: "Desarrollo", sueldo: 160000 },
    { nombre: "Carlos", sector: "RRHH", sueldo: 110000 },
    { nombre: "Julia", sector: "Diseño", sueldo: 130000 }
];

// PROMEDIO DE SUELDOS
let arraySueldoEmpleados = empleados.map((empleado) => empleado.sueldo); // creamos un array que solamente contenga los sueldos
let sumatoriaSueldos = arraySueldoEmpleados.reduce((acumulador, numeroActual) => acumulador + numeroActual, 0); // tomamos la lista creada y aplicamos el metodo reduce para sumar todos sus elementos. similar al metodo sum() de python
let promedioSueldos = sumatoriaSueldos / empleados.length // dividimos las sumatoria de los sueldos por las cantidad de empleados
//IMPORTANTE: la variable promedioSueldos sera usada mas tarde al final de la tabla

// TABLA DINAMICA: este ejercicio lo separ`e en dos partes, DINAMICA y NO DINAMICA. 

// Empezamos por la parte NO DINAMICA: (parte de la tabla que no deberia a camibiar, aunque ingresen mas empleados)
//creamos/asignamos los elementos necesarios
let body =  document.querySelector('body');
tabla = document.createElement('table');
tableHead = document.createElement('thead'); 
tableRowHeader = document.createElement('tr');
thc1 = document.createElement('th');  // thc: abreviatura de TableHeaderCell
thc2 = document.createElement('th');
thc3 = document.createElement('th');
thc4 = document.createElement('th');
tableBody = document.createElement('tbody');
// aplicamos el textContent a los elementos 
thc1.textContent = 'Nombre';
thc2.textContent = 'Sector';
thc3.textContent = 'Sueldo';
thc4.textContent = 'Promedio';
// asignamos a la tabla los elementos
body.appendChild(tabla);
tabla.appendChild(tableHead);
tableHead.appendChild(tableRowHeader);
tableRowHeader.appendChild(thc1);
tableRowHeader.appendChild(thc2);
tableRowHeader.appendChild(thc3);
tableRowHeader.appendChild(thc4);
tabla.appendChild(tableBody);

// Ahora vamos por la parte DINAMICA:
for (let empleado of empleados){ // iteramos la lista 
    //Creamos una row y tres 'td' por empleado, para nombre, sector y sueldo
    RowEmpleado = document.createElement('tr');
    nombreEmpleado = document.createElement('td');
    sectorEmpleado = document.createElement('td');
    sueldoEmpleado = document.createElement('td');
    //Llenamos las 'td' con su respectivo texto acceciendo al objeto iterado
    nombreEmpleado.textContent = empleado.nombre;
    sectorEmpleado.textContent = empleado.sector;
    sueldoEmpleado.textContent = empleado.sueldo;
    //Anexamos los elementos 'row' y 'td'
    tableBody.appendChild(RowEmpleado);
    RowEmpleado.appendChild(nombreEmpleado);
    RowEmpleado.appendChild(sectorEmpleado);
    RowEmpleado.appendChild(sueldoEmpleado);
};

// Creamos la fila para el promedio y la anexamos a tablebody
rowPromedio = document.createElement('tr');
tableBody.appendChild(rowPromedio);
// Creamos los td (pero solo vamos a llenar el ultimo)
td1 = document.createElement('td');
td2 = document.createElement('td');
td3 = document.createElement('td');
tdPromedio = document.createElement('td');
// Llenamos el 'td'
tdPromedio.textContent = promedioSueldos;
// anecamos los 'td'
rowPromedio.appendChild(td1);
rowPromedio.appendChild(td2);
rowPromedio.appendChild(td3);
rowPromedio.appendChild(tdPromedio);