$(document).ready(function () {

    var API = 'https://api.punkapi.com/v2/beers'
    var perPage = 20
    var pageNumber = 1

    var beerList = $('#beers')
    var loader = $("#loader")

    loader.show()

    $.ajax({
        url: API + '?page=' + pageNumber + '&per_page=' + perPage,
        method: 'GET',
        success: showBeerList
    });

    function showPage () {
        loader.hide()
        $("#main").show()
    }

// CREATE PLACE FOR BEER SPECIFICATION
    function beerSpecification (item) {

        var picture = "url(" + item.image_url + ")"

        $('<div class="beer-specyfication">').attr('id', 'beer-number' + item.id)
            .append($('<div class="beer-picture">').css('background-image', picture))
            .append($('<h2 class="beer-title">').text(item.name))
            .append($('<h3 class="beer-tagline">').text(item.tagline))
            .appendTo(beerList);
    }

// CREATE MODAL WINDOW
    function displayModalWindow (item, allSimilarBeers) {
        var modalId = 'modal' + item.id
        var picture = "url(" + item.image_url + ")"

        var modal = $('<div class="modal">').attr('id', modalId)
            .appendTo(beerList).css('background-color', 'rgba(0, 0, 0, 0.4)')

        $('<div class="modal-content">')
            .append($('<div class="modal-beer-picture">').css('background-image', picture))
            .append($('<button class="close">').attr('id', 'button-back' + item.id).text('back')
                .click(function () {
                   modal.remove();
                })
            )
            .append($('<h2 class="modal-beer-title">').text(item.name))
            .append($('<h3 class="modal-beer-tagline">').text(item.tagline))
            .append($('<p class="modal-beer-details">').text('IBU:  ' + item.ibu))
            .append($('<p class="modal-beer-details">').text('ABV:  ' + item.abv + '%'))
            .append($('<p class="modal-beer-details">').text('EBC:  ' + item.ebc))
            .append($('<p class="modal-beer-description">').text(item.description))
            .append($('<p class="modal-beer-tips">').text(item.brewers_tips))
            .append($('<div class="similar-beer-list">'))
            .appendTo(modal)

        $('<p class="show-more">').text('KEEP CALM AND TRY ALSO:').appendTo('.similar-beer-list');

        allSimilarBeers
            .filter(function (elem) { return elem.id !== item.id; })
            .slice(0, 3)
            .forEach(function (similarBeer) {

                var similarBeerId = 'similarBeer' + similarBeer.id
                var picture = 'url(' + similarBeer.image_url + ')'

                $('<div class="similar-beer">').attr('id', similarBeerId)
                    .append($('<div class="similar-beer-picture">').css('background-image', picture))
                    .append($('<h2 class="similar-beer-title">').text(similarBeer.name))
                    .appendTo('#modal' + item.id + ' .similar-beer-list').click(function () {
                        modal.hide();
                        retrieveSimilarBeers(similarBeer, function (allBeers) {
                            modal.remove();
                            displayModalWindow(similarBeer, allBeers);
                        })
                    })
            })

        if (allSimilarBeers.length === 0) {
            $('<p>').text('No similar beers :( ').appendTo('#modal' + item.id + ' .similar-beer-list');
        }

        return modal;
    }

    function retrieveSimilarBeers (beer, callback) {
        function attr (name, value, diff) {
            var min = value - diff
            min = min >= 0 ? min : 0
            return `${name}_gt=${min}&${name}_lt=${value + diff}`
        }

        similarItemAbv = Math.round(beer.abv)
        similarItemIbu = Math.round(beer.ibu)
        similarItemEbc = Math.round(beer.ebc)

        var url = `${API}?${attr('abv', similarItemAbv, 3)}&${attr('ibu', similarItemIbu, 5)}&${attr('ebc', similarItemEbc, 5)}`

        $.ajax({
            url: url,
            method: 'GET',
            success: callback
        })
    }

    function showBeerList (resp) {

        var loadMore = $('#load-more')

        showPage()
        resp.forEach(function (item) {
            beerSpecification(item)
            $('#beer-number' + item.id).click(function () {
                retrieveSimilarBeers(item, function (allSimilarBeers) {
                    displayModalWindow(item, allSimilarBeers)
                })
            })

            loadMore.click(function() {
                perPage =  perPage + 20
                pageNumber = pageNumber + 1
                beerSpecification(item);
            })
        })
    }
})