(() => {
    // webpackBootstrap
    var __webpack_exports__ = {};
    const { actions } = ShopbySkin;

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

        if (bannerId) {
            const bannerData = await actions?.getBannerById?.({ bannerId });
            const data = bannerData?.data || {};
            const imageSize = data?.imageSize || { width: 'auto', height: 'auto' };
            const images = data?.banners?.[0]?.bannerImages || [];
            const visible = data?.banners?.[0]?.visible || false;
            const containerEl = document.querySelector('.main_slider .swiper-wrapper');

            if (visible && images.length) {
                $(document).ready(() => {
                    setTimeout(() => {
                        let sliderHtml = ``;

                        for (let image of images) {
                            const { imageUrl, landingUrl, openLocationType, description } = image;

                            sliderHtml += `
                                <div class="swiper-slide">
                                    <div class="swiper-slide__inner">           
                            `;

                            if (landingUrl) {
                                sliderHtml += `
                                        <a href="${landingUrl}" rel="noreferrer nofollow noopener" target="${openLocationType == 'NEW' ? '_blank' : '_self'}">
                                            <img src="${imageUrl}" class="skin-banner__img" alt="${description}" width="${imageSize.width}" height="${imageSize.height}" />
                                        </a>
                                `;
                            }
                            else {
                                sliderHtml += `
                                        <img src="${imageUrl}" class="skin-banner__img" alt="${description}" width="${imageSize.width}" height="${imageSize.height}" />
                                `;
                            }

                            sliderHtml += `
                                    </div>
                                </div>
                            `;
                        }

                        containerEl.innerHTML = sliderHtml;

                        const updateFraction = (swiper) => {
                            const current = swiper.realIndex + 1;
                            const total = swiper.slides.length;
                            const countLeft = document.querySelector('.count_left');
                            const countRight = document.querySelector('.count_right');

                            countLeft.textContent = current < 10 ? `0${current}` : current;
                            countRight.textContent = total < 10 ? `0${total}` : total;
                        }

                        new Swiper('.main_slider .swiper-container', {
                            loop: true,
                            spaceBetween: 0,
                            speed: 1500,
                            autoplay: {
                                delay: 4000,
                                disableOnInteraction: false,
                                pauseOnMouseEnter: true,
                            },
                            pagination: {
                                el: '.main_slider .swiper-pagination',
                                type: 'bullets',
                                clickable: true,
                            },
                            navigation: {
                                prevEl: '.main_slider .prev',
                                nextEl: '.main_slider .next',
                            },
                            on: {
                                init: function () {
                                    updateFraction(this);
                                },
                                slideChange: function () {
                                    updateFraction(this);
                                },
                            },
                        });
                    }, 1000);
                });
            }
        }
    })();
})();