let userList = [
    {
        id: -1,
        name: "Phước",
        gender: "female", // male, female, other
        dob: "07/22/2026"
    }
]

if(!localStorage.getItem("userList")) { // kiểm tra local có hay chưa
    /* nếu chưa set lên */
    localStorage.setItem("userList", JSON.stringify(userList))
}else {
    /* nếu rồi lấy về lưu vào data userList */
    userList = JSON.parse(localStorage.getItem("userList"))
}   

const table_data_box_el = document.querySelector("#table_data_box");



function renderUi() {

    let data_html = ""

    for (let i = 0; i < userList.length; i++) {
        console.log("userList", userList[i])
        data_html += `
            <tr>
                <td>${i + 1}</td>
                <td>${userList[i].name}</td>
                <td>${getGenderText(userList[i].gender)}</td>
                <td>${userList[i].dob}</td>
                <td>
                    <button onclick="deleteUser(${userList[i].id})">Xóa</button>
                </td>
            </tr>
        `
    }


    table_data_box_el.innerHTML = data_html

    localStorage.setItem("userList", JSON.stringify(userList))
}

function save(e) {
    e.preventDefault() // hủy hình vi call action mặc định của form
    
    let formEL = e.target;

    let newUser = {
        id: Date.now(),
        name: formEL.name.value,
        gender: formEL.gender.value,
        dob: formEL.dob.value,
    }

    console.log("newUser", newUser)

    userList.push(newUser)

    renderUi()
}

function deleteUser(userId) {
    for (let i = 0; i < userList.length; i++) {
        if(userList[i].id == userId) {
            userList.splice(i, 1)
            break
        }
    }

    renderUi()
}

/* helper function */
function getGenderText(genderCode) {
    switch (genderCode) {
        case "male":
            return "nam"
        case "female":
            return "nữ"
        default:
            return "Khác"
    }
}


renderUi()