/** Challenge: 
    - Iterate over the wishlist array.
    - Dynamically render your wishlist from the array.
    - Style the wishlist with CSS.
*/

let wishListHtml = document.getElementById("wishlist")
let btn = document.getElementById("button")
btn.addEventListener("click", onButtonClick)

const wishlist = [
  // TODO: Add more items here
  "A dog",
  "A pet raccoon",
  "A pet opossum"
]

function getWishList(list) {
    list.forEach(item => {
        console.log(item)
        // creating a new list item element
        const listItem = document.createElement("li")
        listItem.textContent = item
        wishListHtml.appendChild(listItem)
        addRemoveBtn(listItem);
    })
    return wishListHtml
}

getWishList(wishlist)


function onButtonClick() {
    const myTextValue = document.getElementById("myText").value
    
    //with .trim(), spaces are ignored and we're checking for the actual content of the input
    //ex:___hello will be accepted, "" is not
    if (myTextValue.trim() === "") {
        alert("Please enter a value before adding to the wishlist.");
        return
    }
    
    const listItem = document.createElement("li")
    listItem.textContent = myTextValue
    wishListHtml.appendChild(listItem)
    console.log(myTextValue)
    addRemoveBtn(listItem)
    clearField()
}

function clearField() {
    document.getElementById("myText").value = ""
}

function addRemoveBtn(listItem) {
    const removeBtn = document.createElement("button")
    removeBtn.setAttribute("class", "remove-button")
    removeBtn.innerHTML = "Delete"
    removeBtn.addEventListener("click", function() {
        wishListHtml.removeChild(listItem)
        removeBtn.parentNode.removeChild(removeBtn)
    })
    listItem.appendChild(removeBtn)
}