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);

    /* 영상 가로 세로 사이즈 */
    var w = '100%';
    var h = '807px';
    var swiper = document.getElementById('swiper-youtube');
    var slides = swiper.getElementsByClassName('video-container');
    var players = [];

    //슬라이드
    var ytbSwiper = new Swiper('#swiper-youtube', {
        // loop: true,
        spaceBetween: 20,
        slidesPerView: 'auto',
        autoplay: false,
        speed: 1300,
        autoplay: {
            delay: 9000,
           // disableOnInteraction: false,
        },
        pagination: false,
        navigation: {
            prevEl: '.video_slider .prev',
            nextEl: '.video_slider .next',
        },
        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 () {
                    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();
            }
        }
    });
};


// 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 {*} x 
 * @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}/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_pc_video";
    const skinBanners = await getSkinBanners(bannerId);
    const bannerImages = skinBanners?.[0]?.banners?.[0]?.bannerImages;

    $('.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="">
                            <div class="display-product__contents thumb-LIST PC">
            `;

            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);

                    swiperSlide += `
                                    <div class="thumb-item" data-product-no="${productNo}">
                                        <!-- 상품이미지 -->
                                        <a
                                            class="thumb-item__media thumb-item__link"
                                            data-product-no="${productNo}"
                                            shopby-is-adult="false"
                                            shopby-action="MOVE_PRODUCT_DETAIL"
                                            href="javascript:void(0);"
                                        >
                                            <!-- 상품이미지 -->
                                            <span class="thumb-item__img">
                                                <img src="${productImageUrl}?500x500" width="500" alt="${productName}" class="" style="" loading="lazy">
                                                <!-- 좋아요 버튼 -->
                                                <button
                                                    type="button"
                                                    class="thumb-fab thumb-fab--like ${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 += `
                                        </a>

                    `;

                    swiperSlide += `
                                        <!-- 상품설명 -->
                                        <a
                                            class="thumb-item__media thumb-item__link"
                                            data-product-no="${productNo}"
                                            shopby-is-adult="false"
                                            shopby-action="MOVE_PRODUCT_DETAIL"
                                            href="javascript:void(0);"
                                        >
                                            <!-- 상품명 -->
                                            <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">
                                                <!-- 할인된 가격 -->
                                                <em class="product-thumb-price ">${numberWithCommas(discountPrice)}</em>
                                                <span class="product-thumb-unit">원</span>
                                                <!-- 즉시할인 또는 추가할인이 있는경우 판매가를 삭선처리 -->
                                                <div class="product-thumb-price--origin ">${numberWithCommas(salePrice)}<span class="fixed_won">원</span></div>
                                                <!-- 판매가에대한 즉시할인+추가할인의 할인율 -->
                                                <span class="product-thumb__immediately-percent ">${numberWithCommas(discountRate)}%</span>
                                            </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 += `
                                        </a>
                                    </div><!-- // thumb-item -->
                    `;

                }
            });

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

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

                initSlider();
            });
        });

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

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