/// <reference path="./card-load.ts" />
/// <reference path="./calandar-create.ts" />
/// <reference path="./social-share.ts" />
function loadRelated(targetJSON, target) {
    $.ajax({
        url: targetJSON
    }).done(function (data) {
        // get data
        var eventCardJSON = data;
        // get templates
        var tags = $('script[data-template="tags"]').text().split(/\$\{(.+?)\}/g);
        var social = $('script[data-template="social"]').text().split(/\$\{(.+?)\}/g);
        var relatedEventsCard = $('script[data-template="relrelatedCard__imageatedEventCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedEventsColorCard = $('script[data-template="relatedEventsColorCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedIndustriesCard = $('script[data-template="relatedindustriesCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedFaqCard = $('script[data-template="relatedFaqCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedCaseStudiesCard = $('script[data-template="relatedCaseStudiesCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedClientProfilesCard = $('script[data-template="relatedClientProfilesCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedNewsCard = $('script[data-template="relatedNewsCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedWhyCard = $('script[data-template="relatedWhyCard"]').text().split(/\$\{(.+?)\}/g);
        var relatedSettingUpHKCard = $('script[data-template="relatedSettingUpHKCard"]').text().split(/\$\{(.+?)\}/g);
        // bind data to templates
        $('.' + target).append(eventCardJSON.map(function (item, index) {
            // events card
            if (item.type === "events") {
                if (item.image != null) {
                    return relatedEventsCard.map(render(item)).join('');
                }
                else {
                    return relatedEventsColorCard.map(render(item)).join('');
                }
            }
            // industries card
            else if (item.type === "industry") {
                return relatedIndustriesCard.map(render(item)).join('');
            }
            // FAQ
            else if (item.type === "FAQ") {
                return relatedFaqCard.map(render(item)).join('');
            }
            // case-studies card
            else if (item.type === "case-studies") {
                var finalHashTag = item.hashtag.map(function (item, index) {
                    return tags.map(render(item)).join('');
                }).join('');
                item["hashtagFinal2"] = finalHashTag;
                return relatedCaseStudiesCard.map(render(item)).join('');
            }
            // client-profiles card
            else if (item.type === "client-profiles") {
                var finalHashTag = item.hashtag.map(function (item, index) {
                    return tags.map(render(item)).join('');
                }).join('');
                item["hashtagFinal2"] = finalHashTag;
                return relatedClientProfilesCard.map(render(item)).join('');
            }
            // news card
            else if (item.type === "why-hk" || item.type === "why-hong-kong-detail") {
                return relatedWhyCard.map(render(item)).join('');
            }
            // setting up hk card
            else if (item.type === "setting-up-hong-kong") {
                return relatedSettingUpHKCard.map(render(item)).join('');
            }
        }));
        var relatedCardLength = $(".relatedCard").length;
        if (relatedCardLength > 0) {
            // do the following if there are cards
            // display cards
            loadCards({
                cardsToDisplay: 4,
                cardClass: 'relatedCard',
                loadMoreButtonClass: 'something'
            });
            // slider
            var relatedCardItems_1 = $('.relatedCard').length;
            if (relatedCardItems_1 == 4) {
                $('.related__cards').slick({
                    prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                    nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                    slidesToShow: 4,
                    responsive: [{
                            breakpoint: 1200,
                            settings: {
                                dots: true,
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 3
                            }
                        }]
                });
            }
            else if (relatedCardItems_1 == 3) {
                $('.related__cards').slick({
                    prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                    nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                    slidesToShow: 4,
                    responsive: [
                        {
                            breakpoint: 1200,
                            settings: {
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 4
                            }
                        },
                        {
                            breakpoint: 700,
                            settings: {
                                dots: true,
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 2
                            }
                        }
                    ]
                });
            }
            else if (relatedCardItems_1 == 2) {
                $('.related__cards').slick({
                    prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                    nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                    slidesToShow: 4,
                    responsive: [
                        {
                            breakpoint: 1200,
                            settings: {
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 700,
                            settings: {
                                dots: true,
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 1
                            }
                        }
                    ]
                });
            }
            else {
                $('.related__cards').slick({
                    prevArrow: "<button class=\"slick-prev\" aria-label=\"" + (dictionary['previous'] || 'Previous') + "\" type=\"button\">" + (dictionary['previous'] || 'Previous') + "</button>",
                    nextArrow: "<button class=\"slick-next\" aria-label=\"" + (dictionary['next'] || 'Next') + "\" type=\"button\">" + (dictionary['next'] || 'Next') + "</button>",
                    slidesToShow: 4,
                    responsive: [{
                            breakpoint: 1200,
                            settings: {
                                dots: true,
                                variableWidth: true,
                                infinite: true,
                                slidesToShow: 3
                            }
                        }]
                });
            }
            setInterval(function () {
                // hide slick dots if only one item
                if (relatedCardItems_1 <= 1) {
                    $('.slick-dots').addClass('hiddenSlick');
                }
            }, 100);
            displaySocial('.' + target, '.relatedCard__share', '.relatedCard');
            genCalander('related__cards', 'relatedCard');
            templateReplaceAttribute();
        }
        else {
            // hide related
            $('.related').hide();
        }
        wrapLinkToFaq();
        cssObjectFit($('.relatedCard__image').not('.noresize'));
        $('.related .slick-slide').removeAttr('tabindex');
        setRelatedTitle();
        setRelatedWechat();
    });
}
function wrapLinkToFaq() {
    $('.relatedCard').each(function () {
        if ($(this).find('.relatedCard__getAnswer').length > 0) {
            var link = $(this).find('a').attr('href');
            $(this).wrapInner('<a href="https://www.investhk.gov.hk/sites/all/themes/investhk/js/' + link + '" class="link-wrap"></a>');
        }
    });
}
function setRelatedTitle() {
    $('.related .slick-slide').each(function () {
        $(this).find('.relatedCard__link > a').attr('aria-label', $(this).find('.relatedCard__text').text());
    });
}
function setRelatedWechat() {
    $(document).find('.socialShare__icon .icon-wechat-icon').parent().find('a').click(function (e) {
        openWechatLightbox(e, $(this), $(this).parents('.relatedCard').find('.relatedCard__link a').attr('href'));
    });
    $(document).on('keydown', ".socialShare__icon .icon-wechat-icon", function (e) {
        if (e.keyCode == 13) {
            openWechatLightbox(e, $(this).parent().find('a'), $(this).parents('.relatedCard').find('.relatedCard__link a').attr('href'));
        }
    });
}