document.addEventListener('DOMContentLoaded', function () {
    const quantidade = document.querySelector('.shopping-form-quantity-input')
    const adicionar = document.querySelector('.shopping-form-increment-button')
    const remover = document.querySelector('.shopping-form-decrement-button')

    adicionar.addEventListener('click', adicionarMaisUm)


    function adicionarMaisUm() {
        const valorAtual = Number(quantidade.value)
        const novoValor = valorAtual + 1

        quantidade.value = novoValor

    }
    remover.addEventListener('click', menosUm)

    function menosUm() {

        const valorAtual = Number(quantidade.value)
        const novoValor = valorAtual - 1

        if (novoValor > 0) {

            quantidade.value = novoValor
        }
    }
    const lista = []

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

    formulario.addEventListener('submit', adicionarProdutoNaLista)
    function adicionarProdutoNaLista(event) {
        event.preventDefault()

        const nomeDoProduto = event.target['item-name'].value
        const quantidadeDeProdutos = event.target['item-quantity'].value

        if (nomeDoProduto != '') {


            const carrinho = {
                nome: nomeDoProduto,
                quantidade: quantidadeDeProdutos
            }

            lista.push(carrinho)
            mostrarLista()
            resetar()

        }

    }

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

    function mostrarLista() {
        let estruturaDosProdutos = ''

        lista.forEach(function (carrinho) {
            estruturaDosProdutos += `
                    <li class="shopping-item">
                    <span>${carrinho.nome}</span>
                    <span>${carrinho.quantidade}</span>
                    </li>
                `
        })

        produtos.innerHTML = estruturaDosProdutos
    }

    function resetar() {
        produtosDoFormulario.value = ''
        quantidade.value = 1
    }





})