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

      return;
    }

    try {
      await actions?.getDisplayProductSectionById?.({
        sectionsId: params?.sectionId,
        includeStopProduct: true,
        ...params?.apiOption?.displayProductSectionByIdQueryParams,
      });

      const products = containerEl.store.getState()?.section?.products;

      if ((params?.customType || params?.customTypeLabel) && products.length > 0) {
        updateSwiperDatas(products, params?.customType, params?.customTypeLabel);
      }

      if (params?.customType === 'grid') {
        setGridSlider(products, params?.customType);
      }
    } catch (e) {
      console.error(e);
      containerEl.setIsLoaded(true);
    }
  };

  const { EventManager, utils, constants, actions } = ShopbySkin;

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

  const displayProductActionMap = {
    // NOTE: 좋아요버튼 클릭.
    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: () => {
              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,
    });
  };

  /*  상품이동형 > 2줋 그리드 형태, + 순위 벳지 작업  
  8개 초과시 4x2 그리드 swiper , 아닌경우 4x2 그리드 형태
  displayOrder 기준 정렬 후 8개씩 그룹화 */
  const filteredProducts = (products = []) => {
    const sorted = [...products].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0));
    const list = [];

    for (let i = 0; i < sorted.length; i += 8) {
      list.push(sorted.slice(i, i + 8));
    }
    return list;
  };

  const updateSwiperDatas = (products, swiperCustomType, customTypeLabel) => {
    const groupedProducts = filteredProducts(products);
    const currentState = containerEl.store.getState();

    const updatedState = {
      ...currentState,
      isSlider: true,
      isEmptySection: false,
      section: {
        ...currentState.section,
        newProducts: groupedProducts,
        customType: swiperCustomType,
        products: '',
        customTypeLabel: customTypeLabel,
      },
    };

    containerEl.store.setState(updatedState);
    containerEl.updateSlot(updatedState, 'displaySectionProductsSlider');
  };

  const createSwiperElements = (products, type) => {
    const swiperSlides = containerEl.querySelector('[shopby-slider]');

    if (!swiperSlides || !(products.length > 8)) return;

    if (type === 'grid') {
      swiperSlides.insertAdjacentHTML('beforeend', '<div shopby-slider-pagination class="swiper-pagination pretendard-label-600--small"></div>');
    }
  };

  const updateSwiper = (products) => {
    const swiperEl = containerEl.querySelector('[shopby-slider]');
    const defaultOption = containerEl.getSwiperOption();
    const pagination = containerEl.querySelector('[shopby-slider-pagination]');

    if (!swiperEl || products.length === 0) return;

    // 상품이 8개 이상인 경우 2줄 swiper, 아닌경우 grid 형태
    const option =
      products.length > 8
        ? {
            slidesPerView: 1,
            pagination: pagination
              ? {
                  el: pagination,
                  type: 'fraction',
                }
              : false,
          }
        : {
            slidesPerView: 4,
            allowTouchMove: false,
            enabled: true,
            watchOverflow: true,
          };

    setTimeout(() => {
      containerEl.initSwiper({
        ...defaultOption,
        spaceBetween: defaultOption.spaceBetween || 0,
        autoplay: false,
        ...option,
      });
    }, 10);
  };

  const setGridSlider = (products, customType) => {
    createSwiperElements(products, customType);
    updateSwiper(products);
  };

  initialize(
    {
      sectionId,
      usesProductSearch: containerEl.hasAttribute('shopby-uses-product-search'),
      customType: containerEl.getAttribute('shopby-custom-type'),
      customTypeLabel: containerEl.getAttribute('shopby-custom-type-label'),
    },
    containerEl,
  );

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