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

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

  let mallName = '';

  // 외부스크립트 등록 기능. 삭제금지
  ShopbyExternalScript?.initialize({
    apiOption: {
      platform: 'PC',
    },
  }).then(() => {
    EventManager.fire('QUERY_PAGE_SCRIPTS', ShopbyExternalScript?.scripts);
  });

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

        let from = e.target.href;
        if(from === undefined){
          from = e.target.closest('a').href;
        }

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

        location.href = `${nextUrl}?from=${encodeURIComponent(from)}`;
      }
    },
    CLICK_SEARCH_KEYWORD: () => {
      setRecentKeyword();
    },
    DELETE_RECENT_KEYWORD:(e) => {
      const keyword = e.target.closest("[shopby-keyword]").getAttribute("shopby-keyword");
      let recentKeywordSet = JSON.parse(localStorage.getItem('RECENT_KEYWORD_SET'));
      if(recentKeywordSet.indexOf(keyword) !== -1){
        recentKeywordSet.splice(recentKeywordSet.indexOf(keyword), 1);
      }
      localStorage.setItem('RECENT_KEYWORD_SET', JSON.stringify(recentKeywordSet));
      setRecentKeywordList();
    }
  };

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

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

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

    // 외부스크립트 등록 기능. 삭제금지
    ShopbyExternalScript?.setGlobalObjectSb({
      getPlatform: () => (isMobileDevice ? 'MOBILE_WEB' : 'PC'),
      profile,
    });

    // 240613 서주원 - 전체 카테고리 검색창 토글 
    var btnCateAll = document.getElementById('btnCateAll');
    var allCateBox = document.querySelector('.all_cate_box');
    
    function showAllCateBox() {
        allCateBox.style.display = 'block';
    }
    
    function hideAllCateBox() {
        allCateBox.style.display = 'none';
    }
    
    btnCateAll.addEventListener('mouseenter', showAllCateBox);
    btnCateAll.addEventListener('mouseleave', hideAllCateBox);
    allCateBox.addEventListener('mouseenter', showAllCateBox);
    allCateBox.addEventListener('mouseleave', hideAllCateBox);
    // 각 div에 depth0 클래스 추가
    document.querySelectorAll('#category-navigation > div').forEach(function(div, index) {
      div.classList.add('depth0' + (index + 1));
    });

    // depth01부터 depth06까지 남기고 나머지는 제거
    document.querySelectorAll('#category-navigation > div').forEach(function(div) {
      var depthClasses = ['depth01', 'depth02', 'depth03', 'depth04', 'depth05'];
      var hasDepthClass = depthClasses.some(function(depthClass) {
        return div.classList.contains(depthClass);
      });

      if (!hasDepthClass) {
        div.remove();
      }
    });

    // depth01을 제외한 나머지 따로 감싸기
    var categoryNavigation = document.getElementById('category-navigation');
    var depthWrap = document.createElement('div');
    depthWrap.className = 'depth_wrap';

    Array.from(categoryNavigation.children).forEach(function(child) {
      if (!child.classList.contains('depth01')) {
        depthWrap.appendChild(child);
      }
    });
    categoryNavigation.appendChild(depthWrap);
    
    document.querySelector('#btnHeaderSch').addEventListener('click', function() {
        var header = document.querySelector('.shopby-header');
        var button = document.querySelector('#btnHeaderSch');
    
        if (header.classList.contains('sch_show')) {
            header.classList.remove('sch_show');
            button.classList.remove('active');
        } else {
            header.classList.add('sch_show');
            button.classList.add('active');
        }
    });
    // 240613 서주원 - 전체 카테고리 검색창 토글 끝

    // 240722 검색 개선
    $(document).ready(function() {
        // 검색창에 값이 입력되거나 변경될 때 실행되는 이벤트
        $('.top_srarch_text').on('input', function() {
            var inputValue = $(this).val();

            if (inputValue.trim() !== '') {
                // $(this).addClass('on');
                $('.recent_search').addClass('dn'); // 최근검색어
                $('.automatic_search').removeClass('dn'); // 자동완성
            } else {
                // $(this).removeClass('on');
                $('.recent_search').removeClass('dn'); // 최근검색어
                $('.automatic_search').addClass('dn');// 자동완성
            }
        });
    });

    setRecentKeywordList();

    const kaimenShopbyApi = new KaimenShopbyApi();
    const request = {
      queryString: {
        size: '10',
      },
    };
    const { data : keywords } = await kaimenShopbyApi.getProductsFavoriteKeywords(request);
    const template = Handlebars.compile(document.querySelector("common-header-search .popular_search").innerHTML);
    let list = template({
      keywords,
    });
    document.querySelector("search-field .popular_search").innerHTML = list;

    mallName = mallConfig.mall.mallName;
    setCategoryBest();
    setCategoryEnergy();
  });

  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 keypressActionMap = {
    KEYPRESS_SEARCH_KEYWORD: (e) => {
      if(e.keyCode === 13){
        setRecentKeyword();
      }
    },
  };
  const keypressEventListener = (e) => {
    const action = e?.target?.closest('[shopby-action]')?.getAttribute('shopby-action');

    keypressActionMap[action]?.(e);
  };
  headerEl?.addEventListener('keypress', keypressEventListener);

  const keyupActionMap = {
    KEYPRESS_SEARCH_KEYWORD: (e) => {
      setSearchAutoCompletion(e.target.value);
    },
  };
  const keyupEventListener = (e) => {
    const action = e?.target?.closest('[shopby-action]')?.getAttribute('shopby-action');

    keyupActionMap[action]?.(e);
  };
  headerEl?.addEventListener('keyup', keyupEventListener);

  const setRecentKeyword = () => {
    let recentKeywordSet = localStorage.getItem('RECENT_KEYWORD_SET') === "" ? null : JSON.parse(localStorage.getItem('RECENT_KEYWORD_SET'));
    if(recentKeywordSet === null){
      recentKeywordSet = [];
    }
    const word = document.querySelector("search-field input").value;
    if(!recentKeywordSet.includes(word)){
      recentKeywordSet.push(word);
    }
    if(recentKeywordSet.length > 10){
      recentKeywordSet.shift();
    }
    localStorage.setItem('RECENT_KEYWORD_SET', JSON.stringify(recentKeywordSet));
  };

  const setRecentKeywordList = () => {
    let recentKeywordSet = localStorage.getItem('RECENT_KEYWORD_SET') === "" ? null : JSON.parse(localStorage.getItem('RECENT_KEYWORD_SET'));
    if(recentKeywordSet == null){
      recentKeywordSet = [];
    }
    const template = Handlebars.compile(document.querySelector("common-header-search .recent_search").innerHTML);
    let recentKeyword = template({
      recentKeywords: recentKeywordSet,
    });
    document.querySelector("search-field .recent_search").innerHTML = recentKeyword;
  };

  const setSearchAutoCompletion = async (search) => {
    let autoList = [];
    let lists = [];
    if(search.length >= 2){
      const kaimenShopbyApi = new KaimenShopbyApi();
      const request = {
        queryString: {
          pageNumber: 1,
          pageSize: 10,
          'filter.keywords' : search,
        },
      };

      const { data } = await kaimenShopbyApi.getProductsSearch(request);
      data?.items?.forEach(item =>{
        let productName = item.productName;
        if(productName.indexOf(search) !== -1 && autoList.indexOf(productName) === -1){
          autoList.push(productName);
        }
      });
      autoList.sort();
      autoList = autoList.map((item) => {
        lists.push({ keyword: item, search });
      });
    }
    const template = Handlebars.compile(document.querySelector("common-header-search .automatic_search").innerHTML);
    document.querySelector("search-field .automatic_search").innerHTML = template({
      lists
    });
  };
  Handlebars.registerHelper({
      setAutomaticWord(search, keyword, tag){
          return keyword.replace(search, "<"+tag+">"+search+"</"+tag+">");
      },
  });

  const setCategoryBest = () => {
    const category = mallCategory[langCode] !== undefined ? mallCategory[langCode]['best'] : mallCategory['best'];
    if(category !== ''){
      let href = document.querySelector(".categoryBest").getAttribute('href') + category;
      document.querySelector(".categoryBest").setAttribute('href', href);
    }
  };

  const setCategoryEnergy = () => {
    const category = mallCategory[langCode] !== undefined ? mallCategory[langCode]['energy_top'] : mallCategory['energy_top'];
    if(category !== ''){
      let href = document.querySelector(".categoryEnergy").getAttribute('href') + category;
      document.querySelector(".categoryEnergy").setAttribute('href', href);
    }
  };

  const requireMarketingPrivacyAgreeNotification = sessionStorage.getItem(
    constants.REQUIRE_MARKETING_PRIVACY_AGREE_NOTIFICATION
  );

  if (requireMarketingPrivacyAgreeNotification) {
    sessionStorage.removeItem(constants.REQUIRE_MARKETING_PRIVACY_AGREE_NOTIFICATION);
    if (!utils.isSignIn()) return;

    const excludePages = new Set(['/pages/sign-in/expired-password-change-form.html', '/pages/my/modify-member.html']);
    if (excludePages.has(location.pathname)) return;

    EventManager.fire('MODAL_ALERT_OPEN', {
      noticeType: '',
      message: '이메일 및 SMS 수신을 위해<br/>마케팅 목적의 개인정보 수집·이용에 동의해 주세요.',
      onClose: () => {
        const nextUrl = `${location.origin}/pages/my/modify-member.html`;
        location.replace(nextUrl);
      },
    });
  }
})();