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

      return;
    }

    const { actions } = ShopbySkin;

    try {
      const data = await actions?.getDisplayProductSectionById?.({
        sectionsId: params?.sectionId,
        ...params?.apiOption?.displayProductSectionByIdQueryParams,
      });
    } 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}"]`);

  //MD탭상품 타이틀 관리자 연동
  setTabTitleBySection();

  function setTabTitleBySection() {
    var sectionTabMap = {
      SCPC0006: 'tab1',
      SCPC0007: 'tab2',
      SCPC0008: 'tab3'
    };

    var scriptEl = document.currentScript;
    if (!scriptEl) return;

    var sectionId = scriptEl.getAttribute('shopby-section-id');
    if (!sectionId) return;

    if (!sectionTabMap[sectionId]) return;

    var containerEl = document.querySelector('[shopby-section-id="' + sectionId + '"]');
    if (!containerEl) return;

    var tabKey = sectionTabMap[sectionId];

    var tryCount = 0;
    var maxTry = 30;

    var timer = setInterval(function () {
      tryCount++;

      var titleEl = containerEl.querySelector('.product-section__title');

      if (titleEl && titleEl.textContent && '' != ( titleEl?.textContent || '' ).trim()) {
        var label = titleEl.textContent.replace(/^\s+|\s+$/g, '');

        var tabButton = document.querySelector(
          '.md_tab_btn[data-tab="' + tabKey + '"]'
        );

        if (tabButton) {
          tabButton.textContent = label;
        }

        clearInterval(timer);
        return;
      }

      if (tryCount >= maxTry) {
        clearInterval(timer);
      }
    }, 100);
  }


  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}${constants.PAGE.SIGN_IN}`;

              utils.moveTo({
                url: `${nextUrl}?from=${encodeURIComponent(location.href)}`,
              });
            },
          });
    },
    // NOTE: 상품터치시 상품상세로 이동전 성인상품인지 확인을 위한 이벤트
    MOVE_PRODUCT_DETAIL: ({ event }) => {
      if (!utils.isAdultVerified(event)) {
        EventManager.fire('MODAL_CONFIRM_OPEN', {
          message: '성인인증이 필요한 상품입니다.',
          noticeType: 'CAUTION',
          onConfirm: () => {
            const productNo = event.target.closest('[shopby-product-no]')?.getAttribute('shopby-product-no');

            const nextUrl = encodeURIComponent(
              `${location.origin}${constants.PAGE.PRODUCT_DETAIL}?productNo=${productNo}`
            );

            utils.moveTo({
              url: `${location.origin}${constants.PAGE.ADULT_CERTIFICATION}?go-back=true&from=${nextUrl}`,
            });
          },
        });
      }
    },
    OPEN_PRODUCT_OPTION_MODAL :({event, btn}) =>{

      event.preventDefault();

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


      EventManager.fire('OPEN_LAYER_MODAL', {
        name: 'select-product-option',
        title: '옵션 선택',
        isFull: true,
        modalAddClass: 'select-product-option-modal full-modal',
        data: {
          productNo,
        },
      });

    }
  };

  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,
    });
  };

  EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => {
    initialize({
      sectionId,
      usesProductSearch: containerEl.hasAttribute('shopby-uses-product-search'),
      commonData,
    },
    containerEl, commonData);
  });

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