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

    const list = [];

    const inputFile = document.querySelector('#input__img');
    const labelInput = document.querySelector('.label-input');
    const textLabelInput = "Imagem";
    labelInput.innerText = textLabelInput;

    const inputTitle = document.querySelector('.input-text__titulo');
    const inputDescription = document.querySelector('.input-text__descricao');
    const form = document.querySelector('.form__tourist-attractions');  
    
    const ulList = document.querySelector('.wrapper-ul__cards');

    //Image Preview
    inputFile.addEventListener('change', (e) => {
        const inputTarget = e.target;
        const file = inputTarget.files[0];

        if (file) {

            const reader = new FileReader();

            reader.addEventListener('load', (e) => {
                const readerTarget = e.target;

                const img = document.createElement('img');
                img.src = readerTarget.result;
                img.classList.add('img-result');

                labelInput.appendChild(img);

            });

            reader.readAsDataURL(file);
            
            labelInput.innerText = "";
            labelInput.style.border = "none";
            

        }else {
            labelInput.innerText = textLabelInput;
            labelInput.style.border = "";
        }
        
    });

    //----------------------------------------------------------





    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const spotImg = labelInput.querySelector('.img-result');
        const spotTitle = e.target['input-title'].value
        const spotDescription = e.target['input-description'].value


        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
            
            const spot = {
                image: spotImg.src,
                titulo: spotTitle,
                description: spotDescription,
            };
    
            list.push(spot);

            renderListItems();
            
        }else {
            alert('Preencha todos os campos')
        }
});


    function renderListItems () {
       let spotStructure = '';

        list.forEach(function (i) {
            spotStructure += `
                <li class="wrapper-cards__li">

                    <div class="result-card__img"> 
                        <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
                    </div>

                    <div class="result-card__text">
                        <h2 class="result-card__title">${i.titulo}</h2>
                        <p> class="result-card__description">${i.description}</p>
                    </div>

                </li>
            `;
        });

        

         ulList.innerHTML = spotStructure;

        

    };



    });