(() => {
  const initialize = async (params, containerEl) => {
    if (params.usesProductSearch) {
      containerEl.setDisplayProductConfig();

      return;
    }

    const { actions } = ShopbySkin;

    try {
      await actions?.getDisplayProductSectionById?.({
        sectionsId: params?.sectionId,
        ...params?.apiOption?.displayProductSectionByIdQueryParams,
      }).then((res) => {
        if ("SCPC0002" == sectionId) {
          var swiperBest = new Swiper(".prd_best .swiper-container", {
              loop: true,
              spaceBetween: 20,
              slidesPerView: 4,
              autoplay: {
                delay: 5000,
                disableOnInteraction: false, //마우스오버시 정지
                pauseOnMouseEnter: true, //마우스오버시 정지
              },
              navigation: {
                prevEl: ".prd_best .prev",
                nextEl: ".prd_best .next",
              },
              pagination: false,
          });
        }

        if ("SCPC0001" == sectionId) {
          var controller = new ScrollMagic.Controller();

          // .prd_scroll_box의 높이를 계산하여 duration 설정
          var prdScrollBox = document.querySelector(".prd_scroll_box");
          var prdScrollBoxHeight = prdScrollBox.offsetHeight;

          var headerY = document.querySelector(".top_header"); // header 요소 선택
          var headerSearch = document.querySelector(".search_keyword_wrap"); // header 검색영역

          setTimeout(function () {
              var imgSrc = document.querySelector(".new_prd_bg .skin-banner__img").src; //배경영역
              document.querySelector(".new_prd_list .bg").style.backgroundImage = "url(" + imgSrc + ")";
              var imgSrc2 = document.querySelector(".new_prd_bg_text .skin-banner__img").src; //배경영역
              document.querySelector(".new_prd_list .bg_text").style.backgroundImage = "url(" + imgSrc2 + ")";
          }, 500);

          var scene = new ScrollMagic.Scene({
              triggerElement: "#newProduct",
              triggerHook: "onLeave",
              duration: prdScrollBoxHeight, // 동적으로 설정
          })
              .setPin("#newProduct")
              .on("enter", function () {
                // #newProduct 도달했을 때 header의 margin-top을 -107px
                headerY.style.marginTop = "-107px";
                headerSearch.style.top = "-145px";
              })
              .on("leave", function () {
                headerY.style.marginTop = "0px";
                headerSearch.style.top = "auto";
              })
              .addTo(controller);

          var prdScrollBoxTween = gsap.to(".prd_scroll_box", { y: "-75%", ease: "none" });

          var prdScrollBoxScene = new ScrollMagic.Scene({
              triggerElement: "#newProduct",
              triggerHook: "onLeave",
              duration: prdScrollBoxHeight, // 동적으로 설정
          })
              .setTween(prdScrollBoxTween)
              .addTo(controller);
        }
      });
    } catch (e) {
      console.error(e);
      containerEl.setIsLoaded(true);
    }
  };

   const { EventManager, utils, constants } = ShopbySkin;

   const sectionId = document.currentScript.getAttribute("shopby-section-id");
   const containerEl = document.querySelector(`[shopby-section-id="${sectionId}"]`);

   const displayProductActionMap = {
      // NOTE: 좋아요버튼 클릭.
      // TODO: 네이밍 변경
      PRODUCT_LIKE_BTN: ({ sectionId, event }) => {
         event?.preventDefault?.();

         const btn = event.target.closest("[shopby-product-no]");
         const productNo = Number(btn.getAttribute("shopby-product-no") ?? 0);

         utils.isSignIn()
            ? EventManager.fire("MUTATE_LIKE_PRODUCT", {
                 productNo,
                 sectionId,
                 onSuccess: (like) => {
                    const likeBtns = document.querySelectorAll(`[shopby-product-no="${productNo}"]`);

                    likeBtns?.forEach((btn) => {
                       like ? btn.classList.add("is-active") : btn.classList.remove("is-active");
                    });
                 },
              })
            : EventManager.fire("MODAL_CONFIRM_OPEN", {
                 message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
                 noticeType: constants.NOTICE_MODAL_TYPE.WARNING,
                 onConfirm: () => {
                    // TODO: 로그인페이지에서 다시 되돌아올 왔을때 좋아요가 반영되어야함..
                    const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

                    location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
                 },
              });
      },
      OPEN_PRODUCT_OPTION_MODAL: ({ event }) => {
         event?.preventDefault?.();

         const btn = event.target.closest("[shopby-product-no]");
         const productNo = Number(btn.getAttribute("shopby-product-no") ?? 0);
         const isSoldOut = utils.convertStringBooleanToBoolean(btn.getAttribute("shopby-is-sold-out"));

         if (isSoldOut) {
            return;
         }

         if (!utils.isAdultVerified(event)) {
            EventManager.fire("MODAL_CONFIRM_OPEN", {
               message: "성인인증이 필요한 상품입니다.",
               noticeType: constants.NOTICE_MODAL_TYPE.CAUTION,
               onConfirm: () => {
                  const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

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

            return;
         }

         EventManager.fire("OPEN_LAYER_MODAL", {
            name: "select-product-option",
            title: "옵션 선택",
            isFull: false,
            modalAddClass: "select-product-option-modal",
            data: {
               productNo,
            },
         });
      },
      MOVE_PRODUCT_DETAIL: ({ event }) => {
         if (!utils.isAdultVerified(event)) {
            EventManager.fire("MODAL_CONFIRM_OPEN", {
               message: "성인인증이 필요한 상품입니다.",
               noticeType: "CAUTION",
               onConfirm: () => {
                  location.href = "/pages/intro/adult-certification.html?go-back=true";
               },
            });
         }
      },
   };

   const clickEventListener = (e) => {
      const btn = e.target.closest("[shopby-action]") || e.target.parentElement.closest("[shopby-action]");
      const action = btn?.getAttribute("shopby-action");

      displayProductActionMap[action]?.({
         sectionId,
         event: e,
      });
   };

   initialize(
    {
      sectionId,
      usesProductSearch: containerEl.hasAttribute('shopby-uses-product-search'),
    },
    containerEl
   );

   containerEl.addEventListener("click", clickEventListener);
   containerEl.removeEventListener("unload", clickEventListener);
})();