// [KR] 마이페이지 index 에서 최근 30일 주문내역을 표시하기 위해 helper 및 custom module 추가
class CustomDesignPopup extends ShopbySkin.modules.DesignPopupNormal {
  initPopupStyle({ popups }) {
    super.initPopupStyle({ popups });
    const popupEl = this.querySelector('[shopby-popup-no]');
    const popupSize = this.querySelector('.swiper-wrapper');
    const state = this.store.getState();

    // [Jay] 팝업 데이터 있는 경우 어드민에 설정된 width, height 값으로 크기 조절
    if (state.popups.length > 0) {
      const screenWidth = state.popups[0].detailInfo.screenWidth;
      const screenHeight = state.popups[0].detailInfo.screenHeight;
      const screenTop = state.popups[0].detailInfo.screenTopPosition;
      const screenLeft = state.popups[0].detailInfo.screenLeftPosition;
      const bgColor = state.popups[0].detailInfo.bgColor;

      const widthUnit =
        state.popups[0].detailInfo.screenWidthUnit === 'PIXEL' ? 'px' : '%';
      const heightUnit =
        state.popups[0].detailInfo.screenHeightUnit === 'PIXEL' ? 'px' : '%';
      const topUnit =
        state.popups[0].detailInfo.screenTopUnit === 'PIXEL' ? 'px' : '%';
      const leftUnit =
        state.popups[0].detailInfo.screenTopUnit === 'PIXEL' ? 'px' : '%';

      if (topUnit == '%') {
        popupEl.setAttribute(
          'style',
          `top: ${screenTop}${topUnit}; left: ${screenLeft}${leftUnit}; transform: translate(-50%, -50%); background-color: ${bgColor};`,
        );
      } else {
        `top: ${screenTop}${topUnit}; left: ${screenLeft}${leftUnit}; background-color: ${bgColor};`;
      }

      popupSize.style.width = screenWidth + 'px';
      popupSize.style.height = screenHeight + 'px';
    }
  }
}

customElements.define('custom-design-popup', CustomDesignPopup);

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

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

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

  // [Jay] 팝업창 스와이퍼 적용
  designPopup.store.attach('popups', () => {
    const designPopupSwiper = {
      id: 'main_popup_swiper',
      direction: 'horizontal',
      effect: 'slide',
      slidesPerView: 1,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      loop: true,
      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);
  });
})();