const niceList = document.getElementById("nice-list")
const naughtyList = document.getElementById("naughty-list")
const btn = document.getElementById("btn")
const input = document.getElementById("input")
const addNice = document.getElementById("add-nice")
const addNaughty = document.getElementById("add-naughty")

btn.addEventListener("click", sort)

const sorteesArr = [
    {
        name: "David",
        hasBeenGood: false
    },
    {
        name: "Del",
        hasBeenGood: true
    },
    {
        name: "Valerie",
        hasBeenGood: false
    },
    {
        name: "Astrid",
        hasBeenGood: true
    }
]

addNice.addEventListener("click", () => {
    if (!input.value) return;
    const person = {
        name: `${input.value}`,
        hasBeenGood: true
        }
        renderPerson(person)
})

addNaughty.addEventListener("click", () => {
    if (!input.value) return;
    const person = {
        name: `${input.value}`,
        hasBeenGood: false
        }
        renderPerson(person)
})

function sort() {
    niceList.innerHTML = ""
    naughtyList.innerHTML = ""
    sorteesArr.map(item => {
        if (item.hasBeenGood) {
            niceList.innerHTML += `<li>${item.name}</li>`
        } else {
            naughtyList.innerHTML += `<li>${item.name}</li>`
        }
    })
}

function renderPerson(item) {
    sorteesArr.push(item)
    sort()
    input.value = ""
}