$(function () {

    var currentUrl = window.location;
    let searchParams = new URLSearchParams(currentUrl.search);
    let paramSearch = searchParams.get('search')

    queryUrl = 'http://localhost:8983/solr/imdb/select?facet.field=genres&facet=on&hl.fl=primaryTitle&hl=on&'

    // if (paramSearch === '') {
    //     httpGet(queryUrl + "q=*:*")
    // }
    // else {
    //     httpGet(queryUrl + "q=primaryTitle:\"" + paramSearch.replace('+', ' ') + "\"")
    // }

    var queryParams = {}
    queryParams.primaryTitle = paramSearch
    queryParams.rows = 50
    queryParams.start = 0
    queryParams.selectedPage = 1
    queryParams.genres = new Set()

    $('#search-title').keypress(function (e) {
        if (e.which === 13) {
            queryParams.primaryTitle = $('#search-title').val()
            queryParams.selectedPage = 1
            refresh()
        }
    });

    $('body').on('click', '.genres-cat', function () {
        queryParams.genres.add($(this).text().replace(': ', ''))
        queryParams.selectedPage = 1
        refresh()
    });

    $('body').on('click', '.genres-filter', function () {
        queryParams.genres.delete($(this).text())
        queryParams.selectedPage = 1
        refresh()
    });

    $('body').on('click', '.page-item', function () {
        el = $(this)
        if (!el.hasClass('active') && !el.hasClass('disabled')) {
            queryParams.selectedPage = parseInt(el.find('a').text())
            refresh()
        }
    });

    refresh()

    function refresh() {
        getUrl = queryUrl
        if (queryParams.primaryTitle && queryParams.primaryTitle !== '') {
            getUrl += 'q=(primaryTitle:' + queryParams.primaryTitle + ')'
            $('#search-title').val(queryParams.primaryTitle)
        }
        else {
            getUrl += 'q=primaryTitle:' + '*'
            $('#search-title').val('')
        }

        if (queryParams.genres.size > 0) {
            queryParams.genres.forEach(element => {
                getUrl += ' AND genres:' + element
            })
        }

        startEl = (queryParams.selectedPage -1) * queryParams.rows

        getUrl += '&rows=' + queryParams.rows
        getUrl += '&start=' + startEl

        httpGet(getUrl)
    }

    function httpGet(url) {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                fillEntries(xhttp.responseText)
            }
        };
        xhttp.open("GET", url, true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.send();
    }

    function getStarRating(ratingValue) {
        let html = '<div>'
        ratingValue = ratingValue / 2
        for (let i = 0; i < 5; i++) {
            let rating = ratingValue - i
            if (rating < 0) {
                html += '<i class="bi bi-star"></i>'
            }
            else if (rating < 0.5) {
                html += '<i class="bi bi-star-half"></i>'
            }
            else {
                html += '<i class="bi bi-star-fill"></i>'
            }
        }
        html = html + '</div>'
        return html;
    }

    function drawPagination(elNum) {

        pgNum = Math.ceil(1.0 * elNum / queryParams.rows)

        let paginationEl = $('.pagination')
        paginationEl.empty()

        html = ''
        if (pgNum > 9) {
            if (queryParams.selectedPage > 3 && queryParams.selectedPage < pgNum - 2) {
                for (let i = 0; i < 3; i++) {
                    if (i + 1 == queryParams.selectedPage) {
                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                    else {
                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                }
                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
                for (let i = queryParams.selectedPage - 2; i < queryParams.selectedPage + 1; i++) {
                    if (i + 1 == queryParams.selectedPage) {
                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                    else {
                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                }
                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
                for (let i = pgNum - 3; i < pgNum; i++) {
                    if (i + 1 == queryParams.selectedPage) {
                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                    else {
                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                }
            }
            else {
                for (let i = 0; i < 4; i++) {
                    if (i + 1 == queryParams.selectedPage) {
                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                    else {
                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                }
                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
                for (let i = pgNum - 4; i < pgNum; i++) {
                    if (i + 1 == queryParams.selectedPage) {
                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                    else {
                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                    }
                }
            }
        }
        if (pgNum > 0 && pgNum < 10) {
            for (let i = 0; i < pgNum; i++) {
                if (i + 1 == queryParams.selectedPage) {
                    html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                }
                else {
                    html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
                }
            }
        }

        paginationEl.html(html)
    }

    function fillEntries(json) {

        const responseObject = JSON.parse(json);

        //var template = document.getElementById("entry-template");

        let template = $('<div>' + $('#entry-template').html() + '</div>')

        //let entries = document.getElementById("entry-list")
        let entries = $('#entry-list')

        entries.empty()

        entries.innerHTML = ''

        let first = true

        $('#number-of-entries').text(responseObject.response.numFound)


        responseObject.response.docs.forEach(element => {
            $.get('http://localhost:8983/solr/imdb_ratings/select?q=tconst:' + element.tconst[0], function (data) {
                if (first == false) {
                    entries.append('<hr>')
                }
                if (responseObject.highlighting[element.id].primaryTitle) {
                    template.find('.primary-title').html(responseObject.highlighting[element.id].primaryTitle[0])
                }
                else {
                    template.find('.primary-title').text(element.primaryTitle[0])
                }
                template.find('.original-title').text(element.originalTitle[0])
                if (data.response.numFound == 1) {
                    template.find('.rating-val').html(getStarRating(data.response.docs[0].averageRating))
                }
                else {
                    template.find('.rating-val').empty()
                }
                template.find('.val-start-year').text(element.startYear)
                template.find('.val-runtime-minutes').text(element.runtimeMinutes)
                let genres = ''
                element.genres.forEach(element => {
                    genres += "<div>" + element + "</div>"
                })
                template.find('.val-genres')[0].innerHTML = genres
                entries.append(template.html())
                first = false
            })
        });


        let facets = responseObject.facet_counts.facet_fields.genres

        let categories = $('#categories')
        categories.empty()
        for (i = 0; i < facets.length; i += 2) {
            if (facets[i + 1] > 0) {
                el = '<div><span class="genres-cat">' + facets[i] + ': </span><span class="genres-val">' + facets[i + 1].toString() + '</span></div>'
                categories.append(el)
            }
        }

        let filters = $('#filters')
        filters.empty()
        queryParams.genres.forEach(element => {
            el = '<div><span class="genres-filter">' + element + '</span></div>'
            filters.append(el)
        })

        drawPagination(responseObject.response.numFound)
    }


});





// var currentUrl = window.location;
// let searchParams = new URLSearchParams(currentUrl.search);
// let paramSearch = searchParams.get('search')

// httpGet("a")

// function httpGet(url) {
//     let xhttp = new XMLHttpRequest();
//     xhttp.onreadystatechange = function () {
//         if (this.readyState == 4 && this.status == 200) {
//             fillEntries(xhttp.responseText)
//         }
//     };
//     xhttp.open("GET", "http://localhost:8983/solr/imdb/select?q=*%3A*", true);
//     xhttp.setRequestHeader("Content-type", "application/json");
//     xhttp.send();
// }

// function fillEntries(json) {
//     let url = 'http://localhost:8983/solr/imdb/select';

//     const responseObject = JSON.parse(json);

//     var template = document.getElementById("entry-template");

//     let entries = document.getElementById("entry-list")

//     entries.innerHTML = ''

//     let first = true

//     responseObject.response.docs.forEach(element => {
//         if (first == false) {
//             entries.innerHTML += '<hr>'
//         }
//         let a = template.getElementsByClassName('primary-title')
//         a[0].innerHTML=element.primaryTitle[0]
//         entries.innerHTML += template.innerHTML
//         first = false
//     });



// }