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

  const designPopup = document.querySelector('design-popup');

  // [Aaron] 스와이퍼 적용
  designPopup.store.attach('popups', () => {
    const designPopupSwiper = {
      id: 'design-popup-slider',
      direction: 'horizontal',
      effect: 'slide',
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      autoHeight: true,
      slidesPerView: 1,
      pagination: {
        el: '.popup-swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          return (
            '<span class="current">' +
            0 +
            current +
            '</span> / ' +
            '<span class="total">' +
            0 +
            total +
            '</span>'
          );
        },
      },
    };
    utils.initSwiper(designPopupSwiper);
  });

  const popupActionMap = {
    CLOSE_DESIGN_POPUP: ({ popupNo }) => {
      EventManager.fire('CLOSE_DESIGN_POPUP', { popupNo });
    },
    NO_VISIBLE_TODAY: ({ popupNo }) => {
      EventManager.fire('NO_VISIBLE_TODAY', { popupNo, shouldHide: true });
    },
  };

  designPopup?.addEventListener('click', ({ target }) => {
    const action = target
      .closest('[shopby-action]')
      ?.getAttribute('shopby-action');
    const popupNo = target
      .closest('[shopby-popup-no]')
      ?.getAttribute('shopby-popup-no');

    popupActionMap[action]?.({
      popupNo,
    });
  });
})();