class CustomRecentProduct extends ShopbySkin.modules.RecentProduct {
  initialSwiper() {
    const test = new Swiper('#recent-product-slider', {
      direction: 'horizontal',
      spaceBetween: 10,
      effect: 'slide',
      slidesPerView: 2.55,
      slidesOffsetBefore: 16,
      slidesOffsetAfter: 16,
      loop: true,
      autoplay: 100,
      pagination: {
        el: '.swiper-pagination',
      },
    });
    return false;
  }
}

customElements.define('custom-recent-product', CustomRecentProduct);

MEMBER_GRADE_INFO = false;

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

  const containerEl = document.querySelector(
    '[shopby-helper-key="my-page-helper-key"]',
  );

  let shopbyCommonData = {};
  EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => {
    shopbyCommonData = commonData;
  });

  const clickEventListener = ({ target }) => {
    const actionType = target
      .closest('[shopby-action]')
      ?.getAttribute('shopby-action');

    const CLICK_EVENT_HANDLER_MAP = {
      LOGOUT: async () => {
        await actions.postSignOut();
        location.href = '/';
      },
      GRADE_BENEFIT: () => {
        // [KR] 회원등급별 혜택 페이지로 이동하도록 코드 수정
        location.href = '/pages/service/member-grade.html';

        // [KR] 기존 팝업 소스는 주석처리
        /*
        EventManager.fire('OPEN_LAYER_MODAL', {
          name: 'grade-benefit-guide',
          title: '등급혜택 안내',
          isFull: true,
          data: {
            commonData: shopbyCommonData,
          },
        });
        */
      },
    };

    CLICK_EVENT_HANDLER_MAP[actionType]?.();
  };

  containerEl.addEventListener('click', clickEventListener);

  // [KR] 탭리스트 관련 스크립트
  // JavaScript for switching tabs
  const tabs = document.querySelectorAll('.tab');
  const contents = document.querySelectorAll('.tab-content');

  tabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      // Remove active class from all tabs and content
      tabs.forEach((t) => t.classList.remove('active'));
      contents.forEach((c) => c.classList.remove('active'));

      // Add active class to the clicked tab and corresponding content
      tab.classList.add('active');
      document
        .getElementById(tab.getAttribute('data-tab'))
        .classList.add('active');
    });
  });

  // Activate the first tab by default
  tabs[0].classList.add('active');
  contents[0].classList.add('active');

  // [dobby] 하단 최근본 상품 스와이퍼

  const sbswiperOptions = {
    id: 'recent-product-slider',
    direction: 'horizontal',
    spaceBetween: 10,
    effect: 'slide',
    slidesPerView: 2.55,
    slidesOffsetBefore: 16,
    slidesOffsetAfter: 16,
    pagination: {
      el: '.swiper-pagination',
    },
  };
  utils.initSwiper(sbswiperOptions);

  // [KR] 회원듭급 컬러 표시
  const profileSummaryElList = document.querySelectorAll('profile-summary');
  profileSummaryElList.forEach((value) => {
    const profileSummaryEl = value;

    profileSummaryEl.store.attach('memberGradeInfo', async (state) => {
      profileSummaryEl.updateSlot(state, 'memberGradeInfo');
    });
    // [KR] 검색창 모달 인기검색어 영역 updateSlot 추가
    profileSummaryEl.store.attach('profile', async (state) => {
      const profile = state.profile;
      const memberGradeNo = profile.memberGradeNo;

      if (!MEMBER_GRADE_INFO) {
        const gradeInfo = await callShopApi(
          `/member-grades?gradeNos=${memberGradeNo}`,
        );
        MEMBER_GRADE_INFO = gradeInfo.result[0];
      }
      profileSummaryEl.updateSlot(state, 'profile');
      profileSummaryEl.store.setState({
        memberGradeInfo: MEMBER_GRADE_INFO,
      });
    });
  });
})();