const initSlider = () => {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    setTimeout(function () {
        //슬라이드
        var ytbSwiper = new Swiper('#swiper-youtube', {
            // loop: true,
            spaceBetween: 20,
            slidesPerView: 'auto',
            speed: 1300,
            autoplay: {
                delay: 9000,
                disableOnInteraction: false,
                //pauseOnMouseEnter: true,
            },
            pagination: {
                el: '#swiper-youtube .swiper-pagination',
                clickable: true,
            },
            /* navigation: {
                prevEl: '.video_slider .prev',
                nextEl: '.video_slider .next',
            }, */
            navigation: false,
            on: {
                slideChange: function () {
                    setTimeout(function () {
                        manageVideoPlayback();
                    }, 500);
                }
            }
        });

        function manageVideoPlayback() {
            document.querySelectorAll(".ytbSwiper .swiper-slide video").forEach(function (video) {
                video.pause();
                video.closest('.video-container').querySelector('.vdo_play_btn').style.display = 'block';
            });

            var activeSlide = document.querySelector(".ytbSwiper .swiper-slide-active");

            if (activeSlide) {
                var activeVideo = activeSlide.querySelector('video');
                var playButton = activeSlide.querySelector('.vdo_play_btn');

                if (activeVideo) {
                    activeSlide.querySelector('.video-container').addEventListener("click", function () {

                        if (activeVideo.paused) {
                            // 비디오가 멈춰 있으면 재생 시작
                            activeVideo.play();
                        }

                    });
                    activeVideo.addEventListener("play", function () {
                        ytbSwiper.autoplay.stop();
                        playButton.style.display = 'none';
                    });

                    activeVideo.addEventListener("pause", function () {
                        ytbSwiper.autoplay.start();
                        playButton.style.display = 'block';
                    });

                    activeVideo.addEventListener("ended", function () {
                        ytbSwiper.autoplay.start();
                        playButton.style.display = 'block';
                    });
                }
            }
        }

        manageVideoPlayback();

        document.getElementById("swiper-youtube").addEventListener("mouseleave", function () {
            var activeSlide = document.querySelector(".swiper-slide-active");
            if (activeSlide) {
                var activeVideo = activeSlide.querySelector('video');
                if (activeVideo && (activeVideo.paused || activeVideo.ended)) {
                    ytbSwiper.autoplay.start();
                }
            }
        });
    }, 1000)
}



// 2024.07.22 snpu98 add [
/**
 * 
 * @param {*} bannerId 
 * @returns 
 */
const getSkinBanners = async (bannerId) => {
    return await fetch(`https://shop-api.e-ncp.com/skin-banners/${bannerId}`, {
        method: "GET",
        headers: {
            "accept": "application/json",
            "version": "1.0",
            "clientid": "99ZDpWfrizZV8irrjPvB8w==",
            "platform": "PC"
        }
    }).then(response => response.json());
};

/**
 * 
 * @param {*} sectionNo // 상품 진열 번호
 * @returns 
 */
const getDisplayProducts = async (sectionNo) => {
    const queryStr = new URLSearchParams({
        by: 'POPULAR',
        direction: 'DESC',
        soldout: 'true',
        saleStatus: 'ONSALE',
        page: 1,
        pageSize: 3,
        hasTotalCount: false,
        hasOptionValues: false,
        includeStopProduct: false,
    }).toString();

    const accessToken = ((name) => { 
        const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
        
        return value? value[2] : '';
    })('SSID');

    return await fetch(`https://shop-api.e-ncp.com/display/sections/${sectionNo}?${queryStr}`, {
        method: "GET",
        headers: {
            "accept": "application/json",
            "version": "1.0",
            "clientid": "99ZDpWfrizZV8irrjPvB8w==",
            "platform": "PC",
            "accessToken": accessToken,
        }
    }).then(response => response.json());
};

/**
 * 
 * @param {*}
 * @returns 
 */
const numberWithCommas = (x) => {
    if (!x) return 0;

    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

/**
 * 
 */
const actionInit = () => {
    const { EventManager, actions, utils, constants } = ShopbySkin;

    const containerEl = document.querySelector(`skin-promo-video`);

    const likeHelper = {
        toggleClassName: (likeEl) => {
            likeEl.classList.toggle('is-active');
        },
        toggleLikeStatus: async (likeEl) => {
            const productNo = likeEl.getAttribute('shopby-product-no') ?? 0;

            await actions.toggleLikeStatus({
                productNo: Number(productNo),
            });
        },
    };

    const displayProductActionMap = {
        // NOTE: 좋아요버튼 클릭
        PRODUCT_LIKE_BTN: async ({ event }) => {
            event?.preventDefault?.();

            if ( !utils.isSignIn() ) {
                EventManager.fire('MODAL_CONFIRM_OPEN', {
                    message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
                    noticeType: constants.NOTICE_MODAL_TYPE.WARNING,
                    onConfirm: () => {
                        const nextUrl = `${location.origin}/en/pages/sign-in/sign-in.html`;

                        location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
                    },
                });

                return;
            }

            const productNo = $(event.target).closest('[shopby-product-no]').attr('shopby-product-no');
            const likeEls = document.querySelectorAll(`[shopby-product-no='${productNo}']`);
            const likeEl1st = document.querySelector(`[shopby-product-no='${productNo}']`);

            for( const likeEl of likeEls ) {
                likeHelper.toggleClassName(likeEl);
            }

            await likeHelper.toggleLikeStatus(likeEl1st);
        },
        // NOTE: 상품터치시 상품상세로 이동전 성인상품인지 확인을 위한 이벤트
        MOVE_PRODUCT_DETAIL: ({ event }) => {
            if (!utils.isAdultVerified(event)) {
                EventManager.fire('MODAL_CONFIRM_OPEN', {
                    message: '성인인증이 필요한 상품입니다.',
                    noticeType: 'CAUTION',
                    onConfirm: () => {
                        location.href = '/pages/intro/adult-certification.html';
                    },
                });
            }

            const productNo = $(event.target).closest('a').attr('data-product-no');

            console.log( productNo );

            if ( productNo ) {
                location.href = `/pages/product/product-detail.html?productNo=${productNo}`;
            }
        },
    };

    const clickEventListener = (e) => {
        const btn = e.target.closest('[shopby-action]') || e.target.parentElement.closest('[shopby-action]');
        const action = btn?.getAttribute('shopby-action');

        displayProductActionMap[action]?.({
            event: e,
        });
    };

    containerEl.addEventListener('click', clickEventListener);
}

(async () => {
    const bannerId = "ko_mo_video";
    const skinBanners = await getSkinBanners(bannerId);
    const bannerImages = skinBanners?.[0]?.banners?.[0]?.bannerImages;

    document.querySelector('.video_slider .swiper-wrapper').innerHTML = '';

    if (bannerImages) {
        let swiperSlide = '';

        bannerImages.forEach(async (bannerImage) => {
            const imageUrl = bannerImage.imageUrl;
            const videoUrl = bannerImage.landingUrl;
            const sectionNo = bannerImage.description.split(",").map(Number);   // 상품 진열번호
            const displayProducts = await getDisplayProducts(sectionNo);

            swiperSlide += `
                <div class="swiper-slide">
                    <div class="video-container">
                        <div class="ytb-player">
                            <video id="video" src="${videoUrl}" controls muted></video>
                        </div>
                        <span class="vdo_play_btn" style="background-image: url('${imageUrl}');">커버이미지</span>
                    </div>

                    <div class="prd_cont">
                        <div slot="">
                            <section>
                                <div class="thumb-GALLERY MOBILE_WEB">
            `;

            displayProducts?.[0]?.products.forEach((product, keyProduct) => {
                if (keyProduct < 3) {
                    const productNo = product.productNo;
                    const productName = product.productName;
                    const promotionText = product.promotionText;
                    const productImageUrl = product.listImageUrlInfo?.[0]?.url;
                    const salePrice = product.salePrice;
                    const discountAmt = product.immediateDiscountAmt + product.additionDiscountAmt;
                    const discountPrice = salePrice - discountAmt;
                    const discountRate = Math.round((discountAmt / salePrice) * 100);
                    const isAdult = product.isAdult ? 'true' : 'false';


                    swiperSlide += `
                                    <a
                                        class="thumb-item thumb-item__link"
                                        data-product-no="${productNo}"
                                        shopby-is-adult="${isAdult}"
                                        shopby-action="MOVE_PRODUCT_DETAIL"
                                        href="javascript:void(0);"
                                    >
                                        <div class="thumb-item__media" style="background:white !important;">
                                            <!-- 상품이미지 -->
                                            <span class="thumb-item__img">
                                                <img src="${productImageUrl}?250x250" width="250" alt="${productName}" class="" style="" loading="lazy">
                                                <!-- 좋아요 버튼 -->
                                                <button
                                                    type="button"
                                                    class="btn--default sc-like-button thumb-fab ${product.liked ? 'is-active' : ''}"
                                                    shopby-action="PRODUCT_LIKE_BTN"
                                                    shopby-product-no="${productNo}"
                                                >
                                                    <span class="ico_wish"></span>
                                                </button>
                                            </span>
                    `;

                    if ( product.isSoldOut ) {
                        swiperSlide += `
                                            <div class="thumb-item__overlay">SOLD OUT</div>
                        `;
                    }

                    if ( product.saleStatusType === 'FINISHED' ) {
                        swiperSlide += `
                                            <span class="thumb-item-badges">
                                                <span class="badge badge--fill-navy">판매종료</span>
                                            </span>
                        `;
                    }
                    else 
                    if ( product.saleStatusType === 'READY' ) {
                        swiperSlide += `
                                            <span class="thumb-item-badges">
                                                <span class="badge badge--fill-red">판매임박</span>
                                            </span>
                        `;
                    }

                    swiperSlide += `
                                        </div>
                    `;


                    swiperSlide += `
                                        <!-- 상품설명 -->
                                        <div class="thumb-item__info">
                                            <p class="product-thumb-title">${productName}</p>
                                            <p class="product-thumb-promotion-text">${promotionText}</p>
                    `;
                    if (discountAmt > 0) {
                        swiperSlide += `
                                                <!-- 가격정보 -->
                                                <div class="product-thumb-price-info">
                                                    <!-- 판매가에대한 즉시할인+추가할인의 할인율 -->
                                                    <span class="product-thumb__immediately-percent ">${numberWithCommas(discountRate)}%</span>
                                                    <!-- 할인된 가격 -->
                                                    <em class="product-thumb-price">${numberWithCommas(discountPrice)}</em>
                                                    <span class="product-thumb-unit">원</span>
                                                    <!-- 즉시할인 또는 추가할인이 있는경우 판매가를 삭선처리 -->
                                                    <div class="product-thumb-price--origin ">
                                                        <div>
                                                            ${numberWithCommas(salePrice)}<span class="fixed_won">원</span>
                                                        </div>
                                                    </div>
                                                </div>
                        `;
                    }
                    else {
                        swiperSlide += `
                                                <!-- 가격정보 -->
                                                <div class="product-thumb-price-info">
                                                    <!-- 할인된 가격 -->
                                                    <em class="product-thumb-price">${numberWithCommas(discountPrice)}</em>
                                                    <span class="product-thumb-unit">원</span>
                                                </div>
                        `;
                    }

                    swiperSlide += `
                                            </div>
                                            <div>
                    `;

                    product.stickerInfos.forEach((stickerInfo) => {
                        const stickerType = stickerInfo.type;
                        const stickerText = stickerInfo.label;

                        swiperSlide += `
                                                <p class="product-thumb__sticker">
                        `;
                            if ( stickerType === 'TEXT' ) {
                                swiperSlide += stickerInfo.label;
                            }
                            else {
                                swiperSlide += `
                                                    <img src="${stickerText}" alt="${productName}" class="product-thumb__sticker-img" />
                                `;
                            }
                        swiperSlide += `
                                                </p>
                        `;
                    });

                    swiperSlide += `
    
                                            </div>
                                        </a>
                            `;

                }
            });

            swiperSlide += `
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            `;

            $(document).ready(() => {
                $('.video_slider .swiper-wrapper').html(swiperSlide);
            });
        });

        $(document).ready(() => {
            initSlider();

            actionInit();
        });
    }
})();
// ] 2024.07.22 snpu98 add