/*! 2024. 5. 2. 오후 4:59:11 */
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
(() => {
  // TODO: 메인 페이지 초기화
  const { utils, EventManager } = ShopbySkin;

  const { createPageScriptInstance } = utils;
  const pageScriptInstance = createPageScriptInstance('PC');
  // 외부스크립트 등록 기능. 삭제금지
  pageScriptInstance.appendPageScript('PAGE_SCRIPT', 'MAIN');

  EventManager.on('ON_API', (data) => {
    const { mallName = '' } = data?.mallConfig?.mall || {};

    const titleEl = document.head.querySelector('title');

    if (titleEl instanceof HTMLElement) {
      titleEl.innerText = mallName;
    }
  });
})();

/******/ })()
;
setTimeout(() => {
    const apBrand = (function () {
        let currentIndex = null;
        let wheelObserver = null;
        let anchorTrigger = null;
        let isScrolling = false;
        let isWheelSlides = false;

        const anchorAttr = '[data-scroll-anchor]';
        const anchorSections = document.querySelectorAll(`#main ${anchorAttr}`);
        const inner = document.querySelector('.ap-post__inner');
        const kv = document.querySelector('.ap-section--kv');
        //const intro = document.querySelector('.ap-section--intro');
        const videoS = document.querySelector('.ap-section--video');
        //const info = document.querySelector('.ap-section--info');
        //const pillar = document.querySelector('.ap-section--pillar');
        // const product = document.querySelector(".ap-section--product");
        const end = document.querySelector('.ap-section--end');
        const productClassName = 'ap-section--product';
        const productImgSwipers = [];
        const scrollToOffsetY = 0;

        const mm = gsap.matchMedia();
        const options = {
            isMobile: "(max-width: 720px)",
            isDesktop: "(min-width: 721px)",
            isTablet: "(max-width: 1440px) and (orientation: portrait)",
        };

        const isAnchor = function (section) {
            if (section) {
                const dataAnchor = section.dataset.scrollAnchor;
                const dataIgnore = section.dataset.anchorIgnore;
                const dataAnchorAutoTarget = section.dataset.anchorAutoTarget;
                let result = null;

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile, isDesktop, isTablet } = ctx.conditions;
                    
                    if (dataAnchor && dataAnchor === 'true') {
                        const targetSection = section.querySelector(dataAnchorAutoTarget);
                        const getPos = targetSection && targetSection.getBoundingClientRect();
                        const deviceCheck = (isMobile && dataIgnore === 'mobile') || (isTablet && dataIgnore === 'mobile') || (isDesktop && dataIgnore === 'pc');

                        if (deviceCheck || dataIgnore === 'auto' && Math.trunc(info.offsetHeight) > window.innerHeight) {
                            result = false;
                        } else {
                            result = true;
                        }
                    }
                });
                
                return result;
            }
        };

        const isTouchEvt = function (e) {
            return e.touches && e.touches.length > 0;
        };

        const preventScroll = {
            disableObserver: function () {
                if (wheelObserver.isEnabled) {
                    wheelObserver.disable();
                    
                    debugConsole.update();
                }
            },
            enableObserver: function () {
                if (!wheelObserver.isEnabled) {
                    wheelObserver.enable();
                    
                    debugConsole.update();
                }
            }
        }

        const setCurrentIndex = function () {
            anchorSections.forEach((section, index) => {
                anchorTrigger = ScrollTrigger.create({
                    trigger: section,
                    id: `section${index}`,
                    start: `top-=1px top`,
                    end: 'bottom top',
                    onToggle: (self) => {
                        if (self.isActive) {
                            setToggleObserver(self);

                            debugConsole.update();
                        }
                    },
                    onUpdate: (self) => {
                        if (self.isActive) {
                            if (currentIndex !== index) {
                                currentIndex = index;
            
                                debugConsole.update();
                            }
                        }
                    },
                    onRefresh: (self) => {
                        if (self.isActive) {
                            currentIndex = index;
            
                            debugConsole.update();
                        }
                    },
                    invalidateOnRefresh: true,
                    preventOverlaps: true,
                    // markers: true

                });
            });
        };

        const setToggleObserver = function(st) {
            if (isScrolling) return;

            if (st.direction === -1) {
                if (!isAnchor(anchorSections[currentIndex])) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            } else {
                if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            }
        };

        
        const setAnimateEffect = (function() {
            const createScrollTrigger = function(trigger, start, end, scrub = false, pin = false, animation = null) {
                ScrollTrigger.create({
                    trigger,
                    start,
                    end,
                    scrub,
                    pin,
                    animation,
                    toggleActions: 'play pause play reverse',
                    invalidateOnRefresh: true,
                    // markers:true,
                });
            }
            
            const kvEffect = function() {
            const header = kv.querySelector('.ap-section__header');
            const logo = header.querySelector('.ap-logo');
            const svg = logo.querySelector('svg');
            const paths = svg.querySelectorAll('.st0'); // Select all path elements
            const title = kv.querySelector('.ap-section__title');

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile } = ctx.conditions;

                    gsap.set(kv, { position: 'relative' });
                    gsap.set(logo, { zIndex: 1 });

                    const tl = gsap
                    .timeline()
                    .to(svg, {
                        scale: isMobile ? 1.6 : 3.76,
                        opacity: 0,
                        duration: 10,
                        ease: 'none',
                        delay: 0,
                        zIndex: 1,
                    })
                    .to(gsap.utils.toArray(paths), { // Convert NodeList to array
                        fill: '#fff',
                        duration: 10,
                        stagger: 0.1, // Add stagger effect to animate each path separately
                    }, '<')
                    .fromTo(title, { yPercent: 20, opacity: 0}, { yPercent: 0, opacity: 1 }, '+=0.1');

                    createScrollTrigger(header, "top top", "bottom top", 1, logo, tl);
                });
            }

            

            const endEffect = function() {
                createScrollTrigger(end.querySelector(".ap-section__body"), "top top", "bottom top", null, false, null);
            }

            const onInit = function() {
                kvEffect();
                //introEffect();
                //pillarEffect();
                //infoEffect();
                endEffect();
            }
            
            return {
                init: onInit
            }
        })();
        
        const setProductPillars = function () {
            const onInit = function () {
                

                //const imgSwiper = document.querySelectorAll(`.${productClassName} .swiper`);
                //imgSwiper.forEach((swiper, index) => {
                //const parentElement = swiper.closest(`.${productClassName}`);
                // const options = {
                //     speed: 1000,
                //     followFinger: false,
                //     navigation: {
                //         nextEl: '.swiper-button-next',
                //         prevEl: '.swiper-button-prev',
                //     },
                //     pagination: {
                //         el: '.swiper-pagination-s',
                //         clickable: true,
                //     },
                //     on: {
                //     init: function () {
                //         const slideIdx = this.activeIndex;
                //         updateContent(this, slideIdx);
                //     },
                //     slideChange: function () {
                //         const slideIdx = this.activeIndex;
                //         updateContent(this, slideIdx);

                //         setTimeout(() => {
                //         if (slideIdx >= 0 && slideIdx <= this.slides.length) {
                //             if (isWheelSlides) {
                //             isWheelSlides = false;
                //             }

                //             debugConsole.update();
                //         }
                //         }, 500);
                //     },
                //     },
                // };

                // if (parentElement && parentElement.classList.contains('ap-section--product') && parentElement.getAttribute('data-product-section-index') === '0') {
                //     options.effect = 'fade';
                // }

                // const prdocutImgSwiper = new Swiper(swiper, options);

                // swiper.closest(`.${productClassName}`).dataset.productSectionIndex = index; // section index媛� �명똿
                // productImgSwipers.push(prdocutImgSwiper);
                // });
            };

            onInit();
        };

        const scrollToSection = function (index) {
            const targetSection = anchorSections[index] || anchorSections[currentIndex];
            let setOffsetObj = { y: targetSection, offsetY: scrollToOffsetY };

            if (isScrolling && !isAnchor(targetSection)) return;
            
            gsap.to(window, {
                duration: 1,
                scrollTo: setOffsetObj,
                ease: 'power2.inOut', // 遺��쒕윭�� �ㅽ겕濡ㅼ쓣 �꾪븳 easing
                onStart: () => {
                    isScrolling = true;

                    debugConsole.update();
                },
                onComplete: () => {
                    currentIndex = index;
                    isScrolling = false;

                    if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                        // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                        preventScroll.disableObserver();
                    } else {
                        preventScroll.enableObserver();
                    }

                    debugConsole.update();
                },
            });
        };

        const scrollToPrevSection = function (observer) {
            if (currentIndex >= 0) {
                const currentSection = anchorSections[currentIndex];
                //const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goPrevSection = function () {
                    const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
                    
                    if (isSectionInView) {
                        scrollToSection(currentIndex);
                    } else {
                        scrollToSection(prevIndex);
                    }
                };

                
                    goPrevSection();
            }
        };

        const scrollToNextSection = function (observer) {
            if (currentIndex < anchorSections.length - 1) {
                const currentSection = anchorSections[currentIndex];
                //const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goNextSection = function () {
                    const nextIndex = currentIndex + 1;
                    scrollToSection(nextIndex);
                };

                
                    goNextSection();
            }
        };

        const wheelEvt = function () {
            wheelObserver = ScrollTrigger.observe({
                target: window,
                type: 'wheel,touch,pointer',
                dragMinimum: 30,
                tolerance: 30,
                lockAxis: true, // drag �쒗븳 - �띿뒪�� �좏깮�� �꾪븳 �붾㈃ �쒕옒洹� �됱쐞 �� 怨좊젮
                preventDefault: true,
                onUp: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToNextSection(self);
                        } else {
                            scrollToPrevSection(self);
                        }
                        
                        debugConsole.update();
                    }
                },
                onDown: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToPrevSection(self);
                        } else {
                            if (wheelObserver.isEnabled) {
                                scrollToNextSection(self);
                            }
                        }

                        debugConsole.update();
                    }
                }
            });
        };


        // �붾쾭源낆슜 �ㅽ겕由쏀듃
        const debugConsole = (function () {
            let consoleEl = null;

            const onUpdate = function () {
                if (consoleEl) {
                    if (consoleEl.querySelector('.log')) {
                        consoleEl.querySelector('.log').textContent = `
                            currentIndex: ${currentIndex} / 
                            isScrolling : ${isScrolling} / 
                            isWheelSlides : ${isWheelSlides} / 
                            wheelObserver.isEnabled : ${wheelObserver && wheelObserver.isEnabled}
                        `;
                    }

                    if (consoleEl.querySelectorAll('button').length > 0) {
                        consoleEl.querySelectorAll('button').forEach((button, index) => {
                            if (index === currentIndex) {
                                button.classList.add('is-active');
                            } else {
                                button.classList.remove('is-active');
                            }
                        });
                    }
                }
            };

            const onInit = function () {
                const newEl = document.createElement('div');
                newEl.classList.add('debug-console');
                document.body.appendChild(newEl);
                consoleEl = document.querySelector('.debug-console');

                if (consoleEl) {
                    let html = '';

                    html += '<p class="log"></p>';
                    anchorSections.forEach((section, index) => {
                        const isActive = index === currentIndex ? 'is-active' : '';
                        html += `<button type="button" onclick="apBrand.toSection(${index})" class="${isActive}">${index}</button>`;
                    });
                    consoleEl.insertAdjacentHTML('beforeend', html);
                    onUpdate();
                }
            };

            return {
                init: onInit,
                update: onUpdate,
            };
        })();

        const onInit = function () {
            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
            
            setAnimateEffect.init();
            setProductPillars();
            wheelEvt();
            setCurrentIndex();
            AOS.init();

            // debugConsole.init(); // 媛쒕컻 �묒뾽�� - 諛고룷�쒖뿉�� 二쇱꽍 泥섎━
        };

        ScrollTrigger.config({
            autoRefreshEvents: "visibilitychange,DOMContentLoaded,load,resize",
            limitCallbacks: true
        });
        
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(() => {
                ScrollTrigger.refresh();
                AOS.refresh()
            }, 250);
        });
        
        return {
            init: onInit,
            toSection: scrollToSection,
        };
    })();
   apBrand.init();
}, 100);