document.addEventListener('DOMContentLoaded', function() {

    // manipulando o form
    const list = []

    const form = document.querySelector('.shopping-form')
    const itemInput = document.querySelector('.shopping-form-item-input')


    // constantes para os buttons 
    const quantityInput = document.querySelector('.shopping-form-quantity-input')
    const incrementButton = document.querySelector('.shopping-form-increment-button')
    const decrementButton = document.querySelector('.shopping-form-decrement-button')

    const items = document.querySelector('.shopping-items')

    incrementButton.addEventListener("click", incrementQuantity)
    decrementButton.addEventListener("click", decrementQuantity)

    form.addEventListener('submit', addItemToList )

    function incrementQuantity() {
        const currentValue = Number(quantityInput.value) // valor que está dentro do input
        const newValue = currentValue + 1

        quantityInput.value = newValue

    }

    function decrementQuantity() {
        const currentValue = Number(quantityInput.value) // valor que está dentro do input
        const newValue = currentValue - 1

        if(newValue > 0) {
            quantityInput.value = newValue
        }
    }

    function addItemToList(event) {
        event.preventDefault() // evita eviar os dados quando se clica no button submit

        const itemName = event.target["item-name"].value // pegando o item que tem dentro do campo
        const itemQuantity = event.target["item-quantity"].value

        if(itemName !== "") {
            const item = {
                name: itemName,
                quantity: itemQuantity,
            };
        }

        list.push(item)
        renderListItems();
        resertInputs()
        // console.log(itemName, itemQuantity)
        // console.log(item)
    }

    // criando uma função redenrizando os itens da lista

    function renderListItems() {
        let itemsStructure = "";

        list.forEach(function(item) {
            itemsStructure += `
                <li class="shopping-item">
                    <span>${item.name}</span>
                    <span>${item.quantity}</span>
                </li>
            `;
        })

        items.innerHTML = itemsStructure
    }

    function resertInputs() {
        itemInput.value = ""; 
        quantityInput.value = 1;
    }
})