/// <reference path="./../../js-common/card-load.ts" />
$(document).ready(function () {
    // get json data for cards
    var happeningCardJSON;
    var subscribeCardJSON;
    var isLoading = false;
    var nextPage = '';
    var happeningCardApi = apiDomain + "/api/whats-happening?language=" + htmlLang;
    var addedBooklets = false;
    var currentPageCount = 0;
    var totalItemCount;
    var isFeaturedCardExists = false;
    // get templates
    var happeningFeatured = $('script[data-template="happeningFeatured"]').text().split(/\$\{(.+?)\}/g);
    var happeningItem = $('script[data-template="happeningItem"]').text().split(/\$\{(.+?)\}/g);
    var happeningSubscribe = $('script[data-template="happeningSubscribe"]').text().split(/\$\{(.+?)\}/g);
    $('.happening__more').addClass('hidden');
    //first load
    getJsonCards(happeningCardApi);
    //load more news
    $('.loadMoreButton').click(function () {
        getJsonCards(nextPage);
    });
    // get cards via JSON
    function getJsonCards(currentPage) {
        if (!isLoading) {
            isLoading = true;
            currentPage = currentPage;
            $.ajax({
                url: currentPage
            }).done(function (data) {
                // get data
                happeningCardJSON = data._items;
                if (data._subscribe) {
                    subscribeCardJSON = data._subscribe;
                }
                nextPage = data._metadata.next;
                totalItemCount = data._metadata.total_count;
                // bind data to templates
                if (totalItemCount <= 0 || typeof nextPage == 'undefined' || typeof happeningCardJSON == 'undefined') {
                    $('.result_not_found').addClass('active');
                    $('.loadMoreButton').addClass('hidden');
                    $('.happening__cards .loader').remove();
                }
                else {
                    $('.result_not_found').removeClass('active');
                    $('.happening__cards').append(happeningCardJSON.map(function (item, index) {
                        if (item.featured && !isFeaturedCardExists) {
                            isFeaturedCardExists = true;
                            return happeningFeatured.map(render(item)).join('');
                        }
                        else {
                            return happeningItem.map(render(item)).join('');
                        }
                    }));
                }
                // display cards
                loadJSONCards({
                    cardsToDisplay: 11,
                    cardClass: 'happeningCard',
                    loadMoreButtonClass: 'happening__more',
                    cardParent: 'happening__cards',
                    totalCards: totalItemCount
                });
                if(!addedBooklets) {
                    addedBooklets = true;
                    var bookletsLinkWrapper = $('#booklets-link-wrapper');
                    var bookletsLink = bookletsLinkWrapper.find('#booklets-link')
                    var bookletsLinkClone = bookletsLink.clone();
                    bookletsLink.remove();
                    $('.happening__cards').append(bookletsLinkClone);
                }
                if ($('.happeningCard:not(.featured)').length > 0) {
                    var totalCardsShowing = $('.happeningCard:not(.featured)').length;
                    if (totalCardsShowing % 3 !== 0) {
                        $('.happening__cards').append(subscribeCardJSON.map(function (item, index) {
                            return happeningSubscribe.map(render(item)).join('');
                        }));
                    }
                }
                if (nextPage == '') {
                    $('.happening__more').addClass('hidden');
                }
                currentPageCount++;
                $('.happeningCard.subscribe').removeClass('hidden');
                templateReplaceAttribute();
                cssObjectFit($('.happeningCard__image'));
                isLoading = false;
                setHappeningCardTitle();
                
            });
        }
    }
});
function setHappeningCardTitle() {
    $('.happeningCard').each(function () {
        $(this).find(' > a').attr('aria-label', $(this).find('.happeningCard__text').text());
    });
}