var swiper01
var swiper02
var swiper03
var swiper04

$(function () {


    // $('.desktop .product').each(function (index, $elm) {
    //     $('.swiper-wrapper .swiper-slide:eq(' + index + ')').append($($elm).clone())
    // })


    swiper01 = new Swiper(".swiper01", {
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: 'bullets'
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });



    // $('.product-list-box').append($('.swiper-pagination'));


    swiper02 = new Swiper(".swiper02", {
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: 'bullets'
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

});

$(window).on('load', function () {
    console.log('load!!');
    AOS.init()

    const baseTime = 4000 / 3;

    setTimeout(() => $('.gift-info-item.item1').addClass('shake-constant'), baseTime * 1);
    setTimeout(() => $('.gift-info-item.item2').addClass('shake-constant'), baseTime * 2);
    setTimeout(() => $('.gift-info-item.item3').addClass('shake-constant'), baseTime * 3);

    // setTimeout(() => {
    //     const baseTimeStar = 2000 / 8;
    //     setTimeout(() => $('.animation-core img.p1').addClass('shake-constant'), baseTimeStar * 1);
    //     setTimeout(() => $('.animation-core img.p2').addClass('shake-constant'), baseTimeStar * 2);
    //     setTimeout(() => $('.animation-core img.p3').addClass('shake-constant'), baseTimeStar * 3);
    //     setTimeout(() => $('.animation-core img.p4').addClass('shake-constant'), baseTimeStar * 4);
    //     setTimeout(() => $('.animation-core img.p8').addClass('shake-constant'), baseTimeStar * 5);
    //     setTimeout(() => $('.animation-core img.p7').addClass('shake-constant'), baseTimeStar * 6);
    //     setTimeout(() => $('.animation-core img.p6').addClass('shake-constant'), baseTimeStar * 7);
    //     setTimeout(() => $('.animation-core img.p5').addClass('shake-constant'), baseTimeStar * 8);
    // }, 3000);

});


function initSwiper03(index) {
    if (!swiper03) {
        setTimeout(function () {
            if (!swiper03) {
                swiper03 = new Swiper(".swiper03", {
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: 'bullets'
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    initialSlide: index
                });
                $('.loading-03').hide();
                $('.swiper03').css({ visibility: 'visible' });
            }
        }, 1000);
    } else {
        swiper03.slideTo(index);
    }

    const titleList = ['能量植化素(popup)', '9種纖維來源(popup)', '多元優蛋白(popup)'];
    GA('click', '產品介紹＿全新升級', titleList[index]);
}

function initSwiper04(index) {
    if (!swiper04) {
        setTimeout(function () {
            if (!swiper04) {
                swiper04 = new Swiper(".swiper04", {
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: 'bullets'
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    initialSlide: index
                });
                $('.loading-04').hide();
                $('.swiper04').css({ visibility: 'visible' });
            }
        }, 1000);
    } else {
        swiper04.slideTo(index);
    }
    const titleList = ['給身體最天然的營養(popup)', '安心承諾無基改成分(popup)', '含天然食營養更完整(popup)'];
    GA('click', '產品介紹＿來自大自然的禮物', titleList[index]);
}

let countClickProduct = 0;

function showProduct(item) {
    console.log('showProduct => ', item);

    const isShow = $('.product .image-item.selected' + item + ':visible').length === 0;
    $('.info-content-box .info-item, .lint-path').hide();
    $('.selected').removeClass('selected');

    if (isShow) {

        if ($('.product .image-item' + item + ':visible').length) {
            $($('.product .image-item' + item + ':visible')[0]).addClass('selected');
            const index = parseInt(item.replace(/p|\./g, ''), 10) - 1;

            if ($('body').width() > 992) {
                const rotateList = [211, 189, 171, 148, 328, 351, 9, 31];
                $('.lint-axis').css({ transform: `rotate(${rotateList[index]}deg)` });
            } else {
                const rotateList = [238, 260, 279, 301, 122, 100, 81, 60];
                $('.lint-axis').css({ transform: `rotate(${rotateList[index]}deg)` });
            }

            $('.lint-path').show();
        }

        $('.info-content-box .info-item').hide();
        $('.info-content-box .info-item' + item).show();
        if (++countClickProduct >= 8) {
            initProductLastAnimation();
        }
        initProductAnimation(countClickProduct);

    }
}


function initProductAnimation(count) {
    $('.background-animation-box .star-product').removeClass('shake-constant');

    const baseTimeStar = 1000 / 12;

    if (/iOS/i.test(window.navigator.userAgent)) {
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-01').addClass('shake-constant') : null, baseTimeStar * 1);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-03').addClass('shake-constant') : null, baseTimeStar * 3);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-05').addClass('shake-constant') : null, baseTimeStar * 5);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-07').addClass('shake-constant') : null, baseTimeStar * 7);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-09').addClass('shake-constant') : null, baseTimeStar * 9);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-11').addClass('shake-constant') : null, baseTimeStar * 11);
    } else {
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-01').addClass('shake-constant') : null, baseTimeStar * 1);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-02').addClass('shake-constant') : null, baseTimeStar * 2);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-03').addClass('shake-constant') : null, baseTimeStar * 3);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-04').addClass('shake-constant') : null, baseTimeStar * 4);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-05').addClass('shake-constant') : null, baseTimeStar * 5);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-06').addClass('shake-constant') : null, baseTimeStar * 6);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-07').addClass('shake-constant') : null, baseTimeStar * 7);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-08').addClass('shake-constant') : null, baseTimeStar * 8);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-09').addClass('shake-constant') : null, baseTimeStar * 9);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-10').addClass('shake-constant') : null, baseTimeStar * 10);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-11').addClass('shake-constant') : null, baseTimeStar * 11);
        setTimeout(() => countClickProduct === count ? $('.background-animation-box:visible .star-product.item-12').addClass('shake-constant') : null, baseTimeStar * 12);
    }

}

function initProductLastAnimation() {
    $('.background-animation-box .star-product-last').removeClass('shake-constant');

    const baseTimeStar = 1000 / 12;

    if (/iOS/i.test(window.navigator.userAgent)) {
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-02').addClass('shake-constant'), baseTimeStar * 2);
        // setTimeout(() => $('.background-animation-box:visible .star-product-last.item-06').addClass('shake-constant'), baseTimeStar * 6);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-09').addClass('shake-constant'), baseTimeStar * 9);
        // setTimeout(() => $('.background-animation-box:visible .star-product-last.item-11').addClass('shake-constant'), baseTimeStar * 11);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-12').addClass('shake-constant'), baseTimeStar * 12);
    } else {
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-02').addClass('shake-constant'), baseTimeStar * 2);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-06').addClass('shake-constant'), baseTimeStar * 6);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-09').addClass('shake-constant'), baseTimeStar * 9);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-11').addClass('shake-constant'), baseTimeStar * 11);
        setTimeout(() => $('.background-animation-box:visible .star-product-last.item-12').addClass('shake-constant'), baseTimeStar * 12);
    }

}