(async () => {
  const { EventManager } = ShopbySkin;

  const searchParams = new URLSearchParams(location.search);

  const $faqItem = $('faq-item'); // faq 리스트 아이템 컴포넌트
  const $banner = $('banner'); // 상단 배너 컴포넌트
  const $noticeItem = $('notice-item'); // 공지사항 리스트 아이템 컴포넌트
  const boardNo = 'faq'; // FAQ 게시판 ID
  const noticeBoardNo = 'notice'; // 공지사항 게시판 ID
  const defaultPageNumber = searchParams.get('pageNumber') ?? 1; // 페이지 넘버
  const defaultPageSize = searchParams.get('pageSize') ?? 5; // 리스트 노출 갯수
  const bannerId = 'service_main_banner'; // 상단 배너 ID

  // [Jay] 상단 배너 조회
  const bannerDataRes = await callShopApi(
    `/display/banners/id/${bannerId}`,
    'GET',
  );
  const bannerData = bannerDataRes.result[0].accounts[0].banners[0];

  // [Jay] 게시글 리스트 렌더
  const bannerHtml = renderHtml($banner, bannerData);
  $banner.append(bannerHtml);

  const params = {
    queryString: {
      pageNumber: defaultPageNumber,
      pageSize: defaultPageSize,
      hasTotalCount: true,
      searchType: 'ALL',
      direction: 'ASC',
    },
  };
  // [Jay] 게시글 상세 조회
  const faqListRes = await callShopApi(
    `/boards/${boardNo}/articles?`,
    'GET',
    params,
  );
  const faqListData = faqListRes.result;

  // [Jay] 게시글 리스트 렌더
  const faqListHtml = renderHtml($faqItem, faqListData);
  $faqItem.append(faqListHtml);

  const noticeParams = {
    queryString: {
      pageNumber: defaultPageNumber,
      pageSize: 3,
      hasTotalCount: true,
    },
  };

  // [Jay] 공지사항 리스트 조회
  const noticeListRes = await callShopApi(
    `/boards/${noticeBoardNo}/articles?`,
    'GET',
    noticeParams,
  );
  const noticeListData = noticeListRes.result.items;

  // [Jay] 공지사항 리스트 렌더
  const noticeListHtml = renderHtml($noticeItem, noticeListData);
  $noticeItem.append(noticeListHtml);

  // [Jay] 공지사항 스와이퍼
  const noticeSwiper = {
    id: 'notice_swiper',
    direction: 'horizontal',
    effect: 'slide',
    slidesPerView: 1.3,
    spaceBetween: 15,
    slidesOffsetBefore: 15,
    slidesOffsetAfter: 15,
  };
  utils.initSwiper(noticeSwiper);

  // [Jay] 마지막에 velocity 적용
  $('.l-content').velocity({ opacity: 1 }, { duration: 500 });

  const ACTION_HANDLER_MAP = {
    FAQ_SEARCH: ({ event }) => {
      const url = new URL(window.location.href); // 현재 url
      const categoryNo = $('#categoryFilter').val(); // 선택된 게시판 카테고리 번호값
      const keyword = $('input[name="keyword"]').val(); // 키워드 input 값

      url.searchParams.set('pageNumber', 1); // 키워드 검색시 무조건 1페이지로 URL 셋팅
      url.searchParams.set('keyword', keyword); // 키워드 URL 셋팅
      url.searchParams.set('categoryNo', categoryNo); // 게시판 카테고리 번호 URL 셋팅

      // 피에지 이동
      location.href = url;
    },
  };

  // FAQ 항목 클릭 시 아코디언 효과
  $('.faq-item').click(function () {
    // 현재 항목 열기/닫기
    if (!$(this).find('.faq-answer').is(':visible')) {
      $(this).find('.faq-answer').slideDown();
      $(this).addClass('active');
    } else {
      $(this).find('.faq-answer').slideUp();
      $(this).removeClass('active');
    }
  });

  const clickEventListener = (e) => {
    if (!e?.target) {
      return;
    }

    const btn =
      e?.target?.closest?.('[shopby-action]') ||
      e?.target?.parentElement?.closest?.('[shopby-action]');
    const action = btn?.getAttribute('shopby-action');

    if (!btn) {
      return;
    }

    ACTION_HANDLER_MAP[action]?.({
      event: e,
    });
  };

  const changeEventListener = (e) => {
    if (!e?.target) {
      return;
    }

    const btn =
      e?.target?.closest?.('[shopby-action]') ||
      e?.target?.parentElement?.closest?.('[shopby-action]');
    const action = btn?.getAttribute('shopby-action');

    // [Jay] 카테고리 필터 선택 이벤트 추가
    if (e.target.getAttribute('id') === 'categoryFilter') {
      ACTION_HANDLER_MAP['FAQ_SEARCH']?.({
        event: e,
      });
    }

    if (!btn) {
      return;
    }

    ACTION_HANDLER_MAP[action]?.({
      event: e,
    });
  };

  document.addEventListener('click', clickEventListener);
  document.addEventListener('change', changeEventListener);
})();