/*! 2024. 5. 2. 오후 4:59:26 */
(() => {
    // webpackBootstrap
    var __webpack_exports__ = {};
    const {
        pageHelper,
        EventManager,
        utils,
        constants
    } = ShopbySkin;
    const {
        initialize
    } = pageHelper.productListHelper();

    const param = utils.getQueryParams();

    (() => {
        initialize({
            ...param,
            categoryNo: param.categoryNo ?? null,
        });

        const productListEl = document.querySelector('product-list-items');

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

                const productNo = Number(btn.getAttribute('shopby-product-no') ?? 0);

                utils.isSignIn() ?
                    EventManager.fire('MUTATE_LIKE_PRODUCT', {
                        productNo,
                        onSuccess: (like) => {
                            like ? btn.classList.add('is-active') : btn.classList.remove('is-active');
                        },
                    }) :
                    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)}`;
                        },
                    });
            },
            // NOTE: 더보기
            SEARCH_MORE_PRODUCT: () => {
                EventManager.fire('SEARCH_MORE_PRODUCT');
            },
            // 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 clickEventListener = (event) => {
            if (!event?.target) {
                return;
            }

            const btn = event.target.closest('[shopby-action]') || event.target.parentElement.closest('[shopby-action]');
            const action = btn?.getAttribute('shopby-action');

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

        EventManager.fire('INIT_CATEGORY_SLIDER', {
            direction: 'horizontal',
            effect: 'slide',
            slidesPerView: 'auto',
        });

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

//2024.0717 snpu98
(() => {
    const language = 'ko';
    const platform = 'mo';

    const { EventManager, utils, actions } = ShopbySkin;

    const getExcludeCategoryNos = async () => {
        const dataSummery = await fetchProductSummery();
        const excludeCategoryNosArr = [];

        for ( const category1 of dataSummery.depth1Categories ) {
            const categoryNo1 = category1.categoryNo;
            const label1 = category1.label;

            if ( 'en' == label1 ) {
                excludeCategoryNosArr.push(categoryNo1);
            }
        }

        const excludeCategoryNos = excludeCategoryNosArr.join(',');

        return excludeCategoryNos;
    };

    const fetchBrandList = async () => {
        const queryStr = new URLSearchParams({
            pageNumber: 1,
            pageSize: 9999,
            hasTotalCount: true,
            "filter.soldOutIncluded": true,
        }).toString();

        return await fetch(`https://shop-api.e-ncp.com/display/brands?${queryStr}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Version: '1.0',
                clientId: '99ZDpWfrizZV8irrjPvB8w==',
                platform: 'PC',
                language: 'ko',
            },
        }).then((res) => res.json());
    };

    const fetchProductSummery = async (brandNo = '', excludeCategoryNos = '') => {
        const queryStr = brandNo ? new URLSearchParams({
            brandNos: brandNo,
            excludeCategoryNos,
            "filter.saleStatus": "ALL_CONDITIONS",
            "filter.soldout": true,
        }).toString() : '';

        return await fetch(`https://shop-api.e-ncp.com/products/search/summary?${queryStr}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Version: '1.0',
                clientId: '99ZDpWfrizZV8irrjPvB8w==',
                platform: 'PC',
                language: 'ko',
            },
        }).then((res) => res.json());
    };

    const fetchBrand = async (brandNo) => {
        return await fetch(`https://shop-api.e-ncp.com/display/brands/${brandNo}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Version: '1.0',
                clientId: '99ZDpWfrizZV8irrjPvB8w==',
                platform: 'PC',
                language: 'ko',
            },
        }).then((res) => res.json());
    };

    const renderBrandList = async (brandNo) => {
        const pathname = location.pathname;
        const brandList = await fetchBrandList();
        const excludeCategoryNos = await getExcludeCategoryNos();
        const brandListEl = document.querySelector('.brand-list-wrap ul');

        if (brandListEl) {
            brandListEl.innerHTML = '';

            brandList.items.forEach(async (brand) => {
                const active = brandNo == brand.brandNo ? 'active' : '';

                brandListEl.innerHTML += `
                    <li class="swiper-slide">
                        <a href="${pathname}?brandNo=${brand.brandNo}&excludeCategoryNo=${excludeCategoryNos}" class="${active}">
                            <img src="${brand.displayAreaContentUrl}" alt="${brand.name}">
                            <p data-i18n="${brand.name}">${brand.name}</p>
                        </a>
                    </li>
                `;
            });
        }

        //브랜드 롤링
        const brandrolling = new Swiper('.brand-list-wrap > div', {
            slidesPerView: 'auto',  // 화면에 보여줄 슬라이드 수
            spaceBetween: 10, 
            loop: true,  // 무한 루프
            loopedSlides: 1,
            navigation: false,
            pagination:false,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });

    };

    const renderCategoryList = async () => {
        const queryParams = utils.getQueryParams();
        const brandNo = queryParams.brandNo ? queryParams.brandNo : '';
        const excludeCategoryNos = await getExcludeCategoryNos();
        const dataSummery = await fetchProductSummery(brandNo, excludeCategoryNos);
        const categoryEl = document.querySelector('.category');
        const categoryListEl = document.querySelectorAll('.category-list');
        const pathname = location.pathname;
        const activeAll = queryParams.categoryNo === undefined ? 'active' : '';
        const checkedAll = queryParams.categoryNo === undefined ? 'checked="checked"' : '';

        categoryListEl[0].innerHTML = `
            <li class="category-nav__link ${activeAll}">
                <a href="${pathname}?brandNo=${brandNo}&excludeCategoryNo=${excludeCategoryNos}" class="category-nav__link__text">
                    <span class='category-nav__label'>전체</span>
                </a>
            </li>
        `;

        categoryListEl[1].innerHTML = `
            <li class="category-nav__link ${activeAll}">
                <label class="form-check form-check--sm">
                    <input type="radio" name="brandGroup" ${checkedAll} onclick="location.href='${pathname}?excludeCategoryNo=${excludeCategoryNos}';" />
                    <span class="form-check__label">전체</span>
                </label>
            </li>
        `;

        dataSummery.depth1Categories.forEach((category) => {
            const categoryNo = category.categoryNo;
            const label = category.label;
            const active = queryParams.categoryNo == categoryNo ? 'active' : '';
            const checked = queryParams.categoryNo == categoryNo ? 'checked="checked"' : '';
            const params = new URLSearchParams(location.search);
            params.set('brandNo', brandNo);
            params.set('categoryNo', categoryNo);
            params.set('excludeCategoryNo', excludeCategoryNos);

            if ( 'celleanser' != label ) {
                categoryListEl[0].innerHTML += `
                    <li class="category-nav__link ${active}">
                        <a href="${pathname}?${params.toString()}" class="category-nav__link__text">
                            <span class='category-nav__label' data-i18n="${label}">${label}</span>
                        </a>
                    </li>
                `;

                categoryListEl[1].innerHTML += `
                    <li class="category-nav__link ${active}">
                        <label class="form-check form-check--sm">
                            <input type="radio" name="brandGroup" ${checked} onclick="location.href='${pathname}?${params.toString()}';" />
                            <span class="form-check__label" data-i18n="${label}">${label}</span>
                        </label>
                    </li>
                `;
            }
        });

        categoryEl.style.display = 'block';
    };

    const renderSkinBanner = async (brandNo) => {
        const brand = await fetchBrand(brandNo);
        const banner = await actions.getBannerById?.({ bannerId: `${language}_${platform}_brand_${brand.name}` });

        if ( Array.isArray(banner?.data?.banners) ) {
            const bannerData = banner.data.banners[0];
            const imageUrl = bannerData.bannerImages?.[0].imageUrl;
            const width = banner.data.imageSize.width;
            const height = banner.data.imageSize.height;
    
            if (!bannerData.visible) {
                return;
            }

            const bannerEl = document.querySelector('.brand-info-img .skin-banner');

            console.log( $(bannerEl) );

            bannerEl.innerHTML = `
                <img src="${imageUrl}" width="${width}" height="${height}" alt="${brand.name}" />
            `;
        }
    };

    EventManager.on('PAGE_LOAD_COMPLETED', async (commonData) => {
        const queryParams = utils.getQueryParams();
        const brandNo = queryParams.brandNo ? queryParams.brandNo : '';

        await renderBrandList(brandNo);

        if (brandNo) {
            await renderCategoryList();
            await renderSkinBanner(brandNo);
        }
    });
})();