(() => {
  // webpackBootstrap
  const { EventManager, actions } = ShopbySkin;

  const bannerId = document.currentScript.getAttribute('shopby-banner-id');

  if (bannerId) {
    actions?.getBannerById?.({ bannerId });
  }
EventManager.on('QUERY_BANNER_BY_ID', () => {

    let tryCnt = 1;

    const interval = setInterval(() => {

        if (100 <= tryCnt) {
            clearInterval(interval);
            return;
        }

        const swiperEl = document.querySelector('.main_visual .swiper');

        if (
            'function' !== typeof Swiper ||
            !swiperEl ||
            undefined === swiperEl.querySelectorAll
        ) {
            tryCnt++;
            return;
        }

        // 이미 초기화된 경우 중복 초기화 방지
        if (swiperEl.swiper) {
            clearInterval(interval);
            return;
        }

        const slide = new Swiper(swiperEl, {
            slidesPerView: 1.476,
            spaceBetween: 0,
            centeredSlides: true,
            loop: true,
            speed: 800,

            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },

            pagination: {
                el: '.main_visual .swiper-pagination',
                type: 'custom',

                renderCustom: function (swiper) {
                    const current = swiper.realIndex + 1;

                    const total = swiper.slides
                        .map(function (slide) {
                            return Number(slide.dataset.swiperSlideIndex);
                        })
                        .filter(function (index, i, arr) {
                            return !isNaN(index) && arr.indexOf(index) === i;
                        })
                        .length;

                    return '<span class="swiper-pagination-current current">' +
                        String(current).padStart(2) +
                        '</span> / ' +
                        '<span class="swiper-pagination-total total">' +
                        String(total).padStart(2) +
                        '</span>';
                }
            },

            navigation: {
                nextEl: '.main_visual .swiper-button-next',
                prevEl: '.main_visual .swiper-button-prev',
            }
        });

        const allBtn = document.querySelector('.swiper_ban_all');
        const layer = document.getElementById('bannerLayer');

        if (!allBtn || !layer) {
            clearInterval(interval);
            return;
        }

        const imageWrap = layer.querySelector('.banner-layer__images');
        const closeBtn = layer.querySelector('.banner-layer__close');
        const dim = layer.querySelector('.banner-layer__dim');

        // 전체보기
        allBtn.addEventListener('click', function () {

            imageWrap.innerHTML = '';

            const slides = Array.from(
                swiperEl.querySelectorAll('.swiper-slide')
            )
            .filter(function (slide) {
                return slide.dataset.swiperSlideIndex !== undefined;
            })
            .sort(function (a, b) {
                return Number(a.dataset.swiperSlideIndex) -
                       Number(b.dataset.swiperSlideIndex);
            });

            slides.forEach(function (slide) {
                const img = slide.querySelector('img');

                if (img) {
                    const newImg = document.createElement('img');

                    newImg.src = img.src;
                    newImg.alt = img.alt || '';

                    imageWrap.appendChild(newImg);
                }
            });

            layer.classList.add('is-open');
            document.body.style.overflow = 'hidden';
        });

        // 레이어 닫기
        function closeLayer() {
            layer.classList.remove('is-open');
            document.body.style.overflow = '';
        }

        if (closeBtn) {
            closeBtn.addEventListener('click', closeLayer);
        }

        if (dim) {
            dim.addEventListener('click', closeLayer);
        }

        clearInterval(interval);

    }, 10);
});
})();