(() => {
   const { EventManager, utils } = ShopbySkin;
   const { setGlobalsVariableBy, isMobileDevice } = utils;

   (() => {
      const headerEl = document.querySelector("shopby-header");

      // 클릭이벤트 맵
      // 1. SIGN_OUT : 로그아웃
      const headerActionMap = {
         SIGN_OUT: () => {
            EventManager.fire("SIGN_OUT");
         },
         GO_MY_MENU: (e) => {
            if (!utils.isSignedIn()) {
               e.preventDefault();

               const from = e.target.href;

               const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

               location.href = `${nextUrl}?from=${encodeURIComponent(from)}`;
            }
         },
      };

      // 클릭이벤트 핸들러
      const clickEventListener = (e) => {
         const action = e?.target?.closest("[shopby-action]")?.getAttribute("shopby-action");

         headerActionMap[action]?.(e);
      };

      // 상단 카테고리 slider 초기화
      EventManager.on("PAGE_LOAD_COMPLETED", ({ profile }) => {
         const main = localStorage.getItem("main") ?? 'normal';
         const headerId = main === "normal" ? "#headerNormal" : "#headerCelleanser";

         console.log(headerId);

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

         const headers = document.querySelectorAll('header');
         
         headers.forEach((header) => {
            const categories = header.querySelectorAll(".all_menu__category");
            const horizontalWrapper = document.createElement("div");
            const verticalWrapper = document.createElement("div");
            horizontalWrapper.className = "horizontal";
            verticalWrapper.className = "horizontal";

            const parent = categories[0].parentNode;

            parent.removeChild(categories[0]);

            categories.forEach((category, index) => {
               // if (index < 6) {
               //    horizontalWrapper.appendChild(category);
               // } else {
               //    verticalWrapper.appendChild(category);
               // }
               horizontalWrapper.appendChild(category);
            });

            parent.appendChild(horizontalWrapper);
            //parent.appendChild(verticalWrapper);

            header?.addEventListener("click", clickEventListener);
         });
      });

      const searchParams = new URLSearchParams(location.search);
      const trackingKey = searchParams.get("trackingKey");
      const channelType = searchParams.get("channelType");

      const { setTrackingKey, setChannelType } = ShopbySkin.utils;
      setTrackingKey(trackingKey);
      setChannelType(channelType);

      // 240521 서주원 - 스크롤 시 헤더 클래스 토글
      document.addEventListener("scroll", function () {
         var topHeader = document.querySelectorAll(".top_header");
         if (window.scrollY > 0) {
            topHeader.forEach((header) => header.classList.add("scroll"));
         } else {
            topHeader.forEach((header) => header.classList.remove("scroll"));
         }
      });

      // 240521 서주원 - 메뉴 토글
      /* document.getElementById('btnAllCate').addEventListener('mouseenter', function() {
            this.classList.add('active');
            document.querySelector('.all_menu_penel').classList.add('show');
        });
        document.getElementById('btnAllCate').addEventListener('mouseleave', function() {
            if (!document.querySelector('.all_menu_penel').matches(':hover')) {
            this.classList.remove('active');
            document.querySelector('.all_menu_penel').classList.remove('show');
            }
        });
        document.querySelector('.all_menu_penel').addEventListener('mouseenter', function() {
            this.classList.add('show');
            document.getElementById('btnAllCate').classList.add('active');
        });
        document.querySelector('.all_menu_penel').addEventListener('mouseleave', function() {
            if (!document.getElementById('btnAllCate').matches(':hover')) {
            this.classList.remove('show');
            document.getElementById('btnAllCate').classList.remove('active');
            }
        }); */

      document.querySelector("#headerNormal #btnAllCate").addEventListener("click", function () {
         this.classList.toggle("active");
         document.querySelector(".l-header").classList.toggle("show-menu");
         document.querySelector(".top_header").classList.toggle("active");
         document.querySelector("#headerNormal .all_menu_penel").classList.toggle("show");
      });

      document.querySelector("#headerCelleanser #btnAllCate").addEventListener("click", function () {
         this.classList.toggle("active");
         document.querySelector(".l-header").classList.toggle("show-menu");
         document.querySelector(".top_header").classList.toggle("active");
         document.querySelector("#headerCelleanser .all_menu_penel").classList.toggle("show");
      });

      document.querySelector(".search_keyword_wrap").addEventListener("mouseleave", function () {
         document.querySelector(".btn_all_cate").classList.add("on");
      });

      document.querySelector(".search_keyword_wrap").addEventListener("mouseenter", function () {
         document.querySelector(".btn_all_cate").classList.remove("on");
      });
   })();

   /******/
})();

setInterval(() => {
   const cartCount = document.querySelector("#topMenuCartCount").innerText;

   document.querySelector("#quickMenuCartCount").innerHTML = cartCount;
}, 100);

//2024.0717 snpu98
(() => {
   const { EventManager, utils } = 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 () => {
      const queryStr = new URLSearchParams({
         "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 renderBrandList = async (brandNo) => {
      const pathname = location.pathname;
      const brandList = await fetchBrandList();
      const excludeCategoryNos = await getExcludeCategoryNos();

      // document.querySelector("#cateBrand").href += `?excludeCategoryNo=${excludeCategoryNos}`;
      document.querySelector("#cateBrand").href += `?categoryNo=799277`;

      const brandListEl1 = document.querySelector(".brand_penel ul");
      const brandListEl2 = document.querySelector(".brand-list-wrap ul");

      if (brandListEl1) {
         brandListEl1.innerHTML = "";

         brandList.items.forEach(async (brand) => {
            brandListEl1.innerHTML += `
               <li class="swiper-slide">
                  <a href="/pages/brand/brand-list.html?brandNo=${brand.brandNo}&categoryNo=799277">
                        <img src="${brand.displayAreaContentUrl}" alt="${brand.name}">
                        <p data-i18n="${brand.name}">${brand.name}</p>
                  </a>
               </li>
            `;
         });
      }

      if (brandListEl2) {
         brandListEl2.innerHTML = "";

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

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

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

      await renderBrandList(brandNo);

      $(document).ready(() => {
         $(".btnsearch").click((e) => {
            // console.log(e);
            // $('.sch_penel').toggleClass('dn');
            $(".btnsearch").toggleClass("active");
            $(".top_header").toggleClass("active");
            $(".btn_all_cate").removeClass("on");
            $(".search_keyword_wrap").toggleClass("show");
         });
      });

      //카테고리내 브랜드 스와이퍼 이벤트 추가
      let brandSwiper = null;

      function initBrandSwiper() {
         if (brandSwiper === null) {
            brandSwiper = new Swiper(".brand_penel_list", {
               slidesPerView: 6,
               spaceBetween: 0,
               loop: true,
               loopedSlides: 1,
               navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
               },
               pagination: false,
               autoplay: {
                  delay: 2500,
                  disableOnInteraction: false,
               },
            });
         }
      }

      function destroySwiper() {
         if (brandSwiper !== null) {
            if ( "function" === typeof(brandSwiper.destroy) ) {
               brandSwiper?.destroy(true, true);
            }

            brandSwiper = null;
         }
      }

      document.getElementById("cateBrand").addEventListener("mouseenter", function () {
         document.querySelector(".brand_penel").classList.add("show");
         initBrandSwiper();
      });
      document.getElementById("cateBrand").addEventListener("mouseleave", function () {
         if (!document.querySelector(".brand_penel").matches(":hover")) {
            document.querySelector(".brand_penel").classList.remove("show");
            destroySwiper();
         }
      });
      document.querySelector(".brand_penel").addEventListener("mouseenter", function () {
         this.classList.add("show");
      });
      document.querySelector(".brand_penel").addEventListener("mouseleave", function () {
         if (!document.getElementById("cateBrand").matches(":hover")) {
            this.classList.remove("show");
            destroySwiper();
         }
      });

      document.querySelectorAll(".header__search .header__search-btn").forEach((btn) => {
         btn.addEventListener("click", function () {
            const parent = this.closest(".header__search");
            const keywords = parent.querySelector("[name=keywords]").value;
            const categoryNo = parent.querySelector("[name=categoryNo]").value;

            if (keywords) {
               location.href = `/en/pages/product/product-list.html?keywords=${keywords}&categoryNo=${categoryNo}`;
            }
            else {
               EventManager.fire('MODAL_ALERT_OPEN', {
                  noticeType: 'WARNING',
                  message: "Please enter your search keyword.",
                  label: 'Confirm',
               });
            }
         });
      });

      document.querySelectorAll(".header__search [name=keywords]").forEach((input) => {
         input.addEventListener("keydown", function (event) {
            if (event.key === "Enter") {
               const parent = this.closest(".header__search");
               const keywords = this.value;
               const categoryNo = parent.querySelector("[name=categoryNo]").value;

               if (keywords) {
                  location.href = `/en/pages/product/product-list.html?keywords=${keywords}&categoryNo=${categoryNo}`;
               }
               else {
                  EventManager.fire('MODAL_ALERT_OPEN', {
                     noticeType: 'WARNING',
                     message: "Please enter your search keyword.",
                     label: 'Confirm',
                  });
               }
            }
         });
      });
   });
})();