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

  const headerEl = document.querySelector('shopby-header');

  // [KR] 검색창 옆 인기검색어 영역 updateSlot 추가
  headerEl.store.attach('popularKeywords', (state) =>
    headerEl.updateSlot(state, 'popularKeywords'),
  );

  // [KR] 검색창 모달 인기검색어 영역 updateSlot 추가
  headerEl.store.attach('searchModalFavoriteKeywords', (state) =>
    headerEl.updateSlot(state, 'searchModalFavoriteKeywords'),
  );

  // [Aaron] 모든 페이지 상단 배너 영역 updateSlot
  headerEl.store.attach('topBanner', (state) =>
    headerEl.updateSlot(state, 'topBanner'),
  );

  // 클릭이벤트 맵
  // 1. SIGN_OUT : 로그아웃
  const headerActionMap = {
    SIGN_OUT: () => {
      EventManager.fire('SIGN_OUT');
    },
    GO_MY_MENU: (e) => {
      if (!utils.isSignedIn()) {
        e.preventDefault();

        const from = e.target.href;

        const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

        location.href = `${nextUrl}?from=${encodeURIComponent(from)}`;
      }
    },
    // [KR] 인기검색어 레이어 팝업 토글
    SHOW_KEYWORDS: (e) => {
      //document.querySelector('popular-keywords').toggle('display');
      const element = document.querySelector('.sch-layer');
      if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'block';
        document.querySelector('.sch-rank').classList.add('active');
      } else {
        element.style.display = 'none';
        document.querySelector('.sch-rank').classList.remove('active');
      }
    },
    SEARCH_MODAL: (e) => {
      const element = document.querySelector('search-modal');
      if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'block';
      } else {
        element.style.display = 'none';
      }
    },
    // [Aaron] 상단 배너 닫기
    BANNER_CLOSE: (e) => {
      e.preventDefault();
      document.querySelector('top-banner').remove();
    },
  };

  // 클릭이벤트 핸들러
  const clickEventListener = (e) => {
    const action = e?.target
      ?.closest('[shopby-action]')
      ?.getAttribute('shopby-action');

    headerActionMap[action]?.(e);
  };

  // 상단 카테고리 slider 초기화
  EventManager.on('PAGE_LOAD_COMPLETED', ({ profile }) => {
    EventManager.fire('INIT_CATEGORY_SLIDER', {
      direction: 'horizontal',
      effect: 'slide',
      slidesPerView: 'auto',
      spaceBetween: 10,
    });

    setGlobalsVariableBy('getPlatform', () =>
      isMobileDevice ? 'MOBILE_WEB' : 'PC',
    );
    setGlobalsVariableBy('profile', profile);
  });

  headerEl?.addEventListener('click', clickEventListener);

  const searchParams = new URLSearchParams(location.search);
  const trackingKey = searchParams.get('trackingKey');
  const channelType = searchParams.get('channelType');

  const { setTrackingKey, setChannelType } = ShopbySkin.utils;
  setTrackingKey(trackingKey);
  setChannelType(channelType);

  const env = await utils.fetchEnvironment();

  // [Aaron] 전체 페이지 가장 상단 배너
  const signUpBannerId = 'page_top_banner_pc';
  fetch(`https://shop-api.e-ncp.com/display/banners/id/${signUpBannerId}`, {
    method: 'GET',
    headers: {
      clientid: env.clientId,
      version: '1.0',
      platform: 'PC',
    },
  })
    .then((response) => {
      if (!response.ok) {
        // throw new Error('');
        console.log('상단 배너 통신 중 오류 발생');
      }
      return response.json(); // JSON 데이터를 파싱
    })
    .then((data) => {
      headerEl.store.setState({
        topBanner: data[0],
      });
    })
    .catch((error) => {
      console.error('인기검색어 기능 실행중 오류가 발생했습니다.', error); // 오류 처리
    });
  // END

  // 인기검색어
  fetch('https://shop-api.e-ncp.com/products/favoriteKeywords', {
    method: 'GET',
    headers: {
      clientid: env.clientId,
      version: '1.0',
    },
  })
    .then((response) => {
      if (!response.ok) {
        // throw new Error('');
        console.log('인기검색어 fetch 통신중 오류 발생');
      }
      return response.json(); // JSON 데이터를 파싱
    })
    .then((data) => {
      if (data.length > 0) {
        EventManager.on('PAGE_LOAD_COMPLETED', () => {
          //document.querySelector('.sch-layer').style.display = 'block';
        });

        // [KR] 인기검색어 레이어팝업 영역도 세팅
        headerEl.store.setState({
          popularKeywords: data,
        });

        // [KR] 인기검색어 레이어팝업 영역도 세팅
        headerEl.store.setState({
          searchModalFavoriteKeywords: data,
        });

        // [KR] 검색어 placeholder 설정
        setTimeout(function () {
          const keyword = headerEl.store.getState().keywords || data[0];
          const searchs = document.querySelectorAll('search-field');
          searchs.forEach((value, index) => {
            value.store.setState({
              keyword: keyword,
            });
          });
          const elements = document.querySelectorAll('.header__search-input');
          elements.forEach((element, index) => {
            element.placeholder = data[0] ?? '';
          });
        }, 500);

        // data 있을 시 swiper 실행
        const rankSwiper = {
          id: 'rank_swiper',
          direction: 'vertical',
          effect: 'slide',
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
        };
        utils.initSwiper(rankSwiper);
      }
    })
    .catch((error) => {
      console.error('인기검색어 기능 실행중 오류가 발생했습니다.', error); // 오류 처리
    });

  // scroll 제어
  const headH = $('.header').height();
  window.addEventListener('scroll', () => {
    let nextScrollTop = window.scrollY;

    if (nextScrollTop >= headH) {
      $('.nav').addClass('fix');
    } else {
      $('.nav').removeClass('fix');
    }
  });

  // GNB Active
  $('.nav__all-menu-btn').on('click', function () {
    $(this).toggleClass('active');
  });

  // [KR-V] PC 문서 head 하단에 Ahrix 검색 위젯을 한 번만 로드한다.
  if (
    !document.querySelector(
      'script[src="https://widget.ahrix.ai/widget/search-widget.js"]',
    )
  ) {
    const ahrixSearchWidget = document.createElement('script');
    ahrixSearchWidget.src = 'https://widget.ahrix.ai/widget/search-widget.js';
    ahrixSearchWidget.dataset.mallNo = '78821';
    ahrixSearchWidget.dataset.token = '03Wcl4WVLtx8vXTwH_1Rcb7frfvXvN1K';
    document.head.appendChild(ahrixSearchWidget);
  }
})();