window.addEventListener('load', solve);

function solve(ev) {
    const genre = document.querySelector('#genre');
    const nameSong = document.querySelector('#name');
    const author = document.querySelector('#author')
    const btnAdd = document.querySelector('button');
    const dateInput = document.querySelector('#date');
    const div = document.querySelector('.all-hits-container');
    const totalLikes = document.querySelector('#total-likes p')
    console.log(totalLikes.textContent);
    const savedSong = document.querySelector('.saved-container');
    btnAdd.addEventListener('click', onAdd);
    let allLikes = 0;
    // genre.value = 'Genere name'
    // //console.log(genre.value);
    // nameSong.value = "I Love You"
    // author.value = 'Rihana the best'
    // dateInput.value = '27.18.2020'



    function onAdd(ev) {
        ev.preventDefault();


        if (genre.value == "" || nameSong.value == "" || author.value == "" || dateInput.value == "") {
            return;
        }

        //let validDate = dateInput.value.

        const divHis = creatElement('div', undefined, 'hits-info');
        const img = creatElement('img');
        img.src = "./static/img/img.png"
        const h2 = creatElement('h2', `Genre: ${genre.value}`);
        const h21 = creatElement('h2', `Name: ${nameSong.value}`)
        const h22 = creatElement('h2', `Author: ${author.value}`)
        const h31 = creatElement('h3', `Date: ${convertDate(dateInput.value)}`);
        const btnSaveSong = creatElement('button', `Save song`, 'save-btn');

        btnSaveSong.addEventListener('click', (saved) => {
            let wholeEl = (saved.target.parentNode);
            wholeEl.querySelectorAll('button').forEach(x => x.remove())
            const btnDelete = creatElement('button', `Delete`, `delete-btn`);
            wholeEl.appendChild(btnDelete);
            savedSong.appendChild(wholeEl)
            btnDelete.addEventListener('click', (onD) => {
            (onD.target.parentNode).remove();
            })

        })
        const btnLike = creatElement('button', `Like song`, 'like-btn');


        btnLike.addEventListener('click', (evt) => {
            allLikes++;
            totalLikes.textContent = `Total Likes: ${allLikes}`;
            evt.target.parentNode.querySelectorAll('button')[1].disabled = true;
            //   evt.target.parentNode.querySelectorAll('buttons')[1].disable = true
        })
        const btnDelete = creatElement('button', `Delete`, 'delete-btn');


        [img, h2, h21, h22, h31, btnSaveSong, btnLike, btnDelete].map(x => divHis.appendChild(x));
        div.appendChild(divHis)

        btnDelete.addEventListener('click', (del) => {
            (del.target.parentNode).remove();
        })

        function creatElement(type, content, attribute) {
            const el = document.createElement(type);
            if (attribute) {
                el.setAttribute('class', attribute); //atribute = class
                el.textContent = content;
            } else if (content) {
                el.textContent = content;
            }
            return el;
        }

        function convertDate(dateValue) {
            while (dateValue.includes('/')) {
                dateValue = dateValue.replace('/', '.')
            }

            return dateValue;
        }


        genre.value = ''
        nameSong.value = ""
        author.value = ''
        dateInput.value = ''

    }



}