(() => {
    const firstGroup = document.querySelector('.first-group'),
        secondGroup = document.querySelector('.second-group'),
        thirdGroup = document.querySelector('.third-group'),
        firstBlock = document.querySelector('#first-line'),
        secondBlock = document.querySelector('#second-line'),
        thirdBlock = document.querySelector('#third-line'),
        btn = document.getElementById('play'),
        typeSelector = document.getElementById('type-selector'),
        lineSelector = document.getElementById('line-selector');

    const replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
                                <img src="$url" alt="$name" class="img-thumbnail">\
                                <div class="info-wrapper">\
                                <div class="text-muted">$name</div>\
                                <div class="text-muted top-padding">$description</div>\
                                <div class="text-muted">$date</div>\
                                </div>\
                                </div>';

    function getParams() {
        return {
            galleryType: typeSelector.value,
            elementCount: lineSelector.value
        }
    }

    function buildGalleryReplace(count) {
        let dataCopy = [...data];
        if (count === '1') {
            dataCopy = dataCopy.splice(0, 3)
        } else if (count === '2') {
            dataCopy = dataCopy.splice(0, 6)
        }
        let outHtml = '';
        dataCopy.forEach(item => {
            outHtml += replaceItemTemplate
                .replace(/\$name/gi, item.name)
                .replace("$url", fixUrl(item.url))
                .replace("$description", item.description)
                .replace("$date", item.date)
        });

        firstBlock.innerHTML = outHtml;
    }

    function buildGalleryTemplate(count) {
        let dataCopy = [...data];
        if (count === '1') {
            dataCopy = dataCopy.splice(0, 3)
        } else if (count === '2') {
            dataCopy = dataCopy.splice(0, 6)
        }
        let outHtml = '';

        dataCopy.forEach(item => {
            outHtml += `<div class="col-sm-3 col-xs-6">\
                            <img src="${fixUrl(item.url)}" alt="${item.name}" class="img-thumbnail">\
                            <div class="info-wrapper">\
                                <div class="text-muted">${item.name}</div>\
                                <div class="text-muted top-padding">${item.description}</div>\
                                <div class="text-muted">${item.date}</div>\
                            </div>\
                        </div>`
        });
        secondBlock.innerHTML = outHtml;

    }

    function buildGalleryCreate(count) {
        let dataCopy = [...data];
        if (count === '1') {
            dataCopy = dataCopy.splice(0, 3)
        } else if (count === '2') {
            dataCopy = dataCopy.splice(0, 6)
        }
        // let outHtml = ''/;

        dataCopy.forEach(item => {
            wrapper = document.createElement('div');
            wrapper.classList.add('col-sm-3', ['col-xs-6']);

            let img = document.createElement('img');
            img.setAttribute('src', fixUrl(item.url));
            img.setAttribute('alt', item.name);
            img.classList.add('img-thumbnail');

            let infoWrapper = document.createElement('div');
            infoWrapper.classList.add('info-wrapper');

            let itemName = document.createElement('div');
            itemName.classList.add('text-muted');
            let itemDescription = document.createElement('div');
            itemDescription.classList.add('text-muted', 'top-padding');
            let itemDate = document.createElement('div');
            itemDate.classList.add('text-muted');

            let name = document.createTextNode(item.name);
            let description = document.createTextNode(item.description);
            let date = document.createTextNode(item.date);

            itemName.appendChild(name);
            itemDescription.appendChild(description);
            itemDate.appendChild(date);

            infoWrapper.appendChild(itemName);
            infoWrapper.appendChild(itemDescription);
            infoWrapper.appendChild(itemDate);

            wrapper.appendChild(img);
            wrapper.appendChild(infoWrapper);

            thirdBlock.appendChild(wrapper);
        })

    }

    function buildGallery(params) {
        console.dir(params);
        switch (params.galleryType) {
            case '1':
                buildGalleryReplace(params.elementCount);
                break;
            case '2':
                buildGalleryTemplate(params.elementCount);
                break;
            case '3':
                buildGalleryCreate(params.elementCount);
                break;
            default:
                alert('Укажите, пожалуйста, тип галлереи!')
        }
    }

    function clearGallery() {
        firstBlock.innerHTML = '';
        secondBlock.innerHTML = '';
        thirdBlock.innerHTML = '';
        firstGroup.classList.add('hide');
        secondGroup.classList.add('hide');
        thirdGroup.classList.add('hide');
    }

    function showGalleryReplace() {
        firstGroup.classList.remove('hide');
        firstGroup.classList.add('show');
    }
    function showGalleryTemplate() {
        secondGroup.classList.remove('hide');
        secondGroup.classList.add('show');
    }
    function showGalleryCreate() {
        thirdGroup.classList.remove('hide');
        thirdGroup.classList.add('show');
    }

    function showGallery(params) {
        let galleryType = params.galleryType;
        switch (galleryType) {
            case '1':
                showGalleryReplace();
                break;
            case '2':
                showGalleryTemplate();
                break;
            case '3':
                showGalleryCreate();
                break;
        }
    }

    function fixUrl(txt) {
        return 'http://' + txt;
    }

    function run() {
        clearGallery();
        let params = getParams();
        buildGallery(params);
        showGallery(params);
    }

    btn.addEventListener('click', run);
})();