import { getEmployees } from "./apiService.js";

const doc = {
    empsBody: document.querySelector('#empsBody')
}
const state = {
    empList: []
}

window.addEventListener('load', () => {
    init();
});

function init() {
    getEmps();
}

async function getEmps() {
    state.empList = await getEmployees();
    renderTable()
}

function renderTable() {    
    state.empList.forEach(emp => {
        let tr = document.createElement('tr');
        tr.innerHTML =`
           <td>${emp.id}</td>
           <td>${emp.name}</td>
           <td>${emp.city}</td>
           <td>${emp.salary}</td>
           <td>
            <button class="btn btn-primary"
                data-id="${emp.id}"
                data-name="${emp.name}"
                data-city="${emp.city}"
                data-salary="${emp.salary}"
            >Szerkesztés</button>

            <button class="btn btn-primary"
            >Törlés</button>
           </td>
        `;
        const editBtn = tr.querySelector('button:nth-child(1)');
        editBtn.addEventListener('click', () => updateEmployee(editBtn));

        const delBtn = tr.querySelector('button:nth-child(2)');
        delBtn.addEventListener('click', () => deleteEmployee(emp.id));

        doc.empsBody.appendChild(tr);
    });
    
}

function updateEmployee(source) {
    console.log(source.dataset.city)
}

function deleteEmployee(id) {
    console.log(id)
}