(() => {
    const { pageHelper, utils, EventManager, constants } = ShopbySkin;
    const { initialize } = pageHelper.productListHelper();
  
    const urlQueryParams = utils.getQueryParams();
  
    const productListEl = document.querySelector('product-list-items');
    const addParam = { 
      ...urlQueryParams,
      apiOption: {
        productsSearchQueryParams: {
          brandNos : urlQueryParams?.brandNos,
        }
      }
    };
    initialize(addParam);
    const addParamQueryString = '&' + new URLSearchParams(addParam.apiOption.productsSearchQueryParams).toString();
    
    const productListActionMap = {
      // NOTE: 좋아요버튼 클릭
      PRODUCT_LIKE_BTN: ({ event }) => {
        event?.preventDefault?.();
  
        const btn = event.target.closest('[shopby-product-no]');
        const productNo = Number(btn.getAttribute('shopby-product-no') ?? 0);
  
        utils.isSignIn()
          ? EventManager.fire('MUTATE_LIKE_PRODUCT', {
              productNo,
              onSuccess: (like) => {
                like ? btn.classList.add('is-active') : btn.classList.remove('is-active');
              },
            })
          : EventManager.fire('MODAL_CONFIRM_OPEN', {
              message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
              noticeType: constants.NOTICE_MODAL_TYPE.WARNING,
              onConfirm: () => {
                const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;
  
                location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
              },
            });
      },
      MOVE_PRODUCT_DETAIL: ({ event }) => {
        if (!utils.isAdultVerified(event)) {
          EventManager.fire('MODAL_CONFIRM_OPEN', {
            message: '성인인증이 필요한 상품입니다.',
            noticeType: 'CAUTION',
            onConfirm: () => {
              location.href = '/pages/intro/adult-certification.html?go-back=true';
            },
          });
        }
      },
    };
  
    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;
      }
  
      productListActionMap[action]?.({
        event: e,
      });
    };
  
    EventManager.on('PAGE_LOAD_COMPLETED', () => {
      // 외부스크립트 등록 기능. 삭제금지
      ShopbyExternalScript?.setPageScriptType(urlQueryParams?.keywords ? 'PRODUCT_SEARCH' : 'PRODUCT_LIST');
    });
  
    EventManager.on('QUERY_SEARCH_PRODUCTS_BY', (data) => {
      console.log(productListEl.store.state)
      // 외부스크립트 등록 기능. 삭제금지
      ShopbyExternalScript?.setGlobalObjectSb({
        searchedProduct: {
          ...data,
          items: productListEl.store.state.items,
        },
      });
  
      if (!urlQueryParams?.brandNos) {
        // 파트너 목록
        ShopbyExternalScript?.setGlobalObjectSb({
          currentCategory: null,
        });
      }
      // pagination에 addParamQueryString 추가 건 sjh
      document.querySelectorAll('.pagination > a').forEach(function(anchor) {
        const currentHref = anchor.getAttribute('href');
        // 쿼리스트링이 이미 있는 경우엔 & 추가, 없는 경우 ? 추가
        const connector = currentHref.includes('?') ? '&' : '?';
        const newHref = currentHref + connector + addParamQueryString;
      
        anchor.setAttribute('href', newHref);
      });
      
    });
  
    EventManager.on('QUERY_DISPLAY_CATEGORY', (data) => {
      // 외부스크립트 등록 기능. 삭제금지
      ShopbyExternalScript?.setGlobalObjectSb({
        currentCategory: data?.currentCategory,
      });
    });
  
    document.addEventListener('click', clickEventListener);
  
    
    function toggleDisplay(element, item) {
        if (window.getComputedStyle(element).display === "none") {
            element.style.display = "block";
            item.classList.add('on');
        } else {
            element.style.display = "none";
            item.classList.remove('on');
        }
    }
    document.addEventListener("click", function(event) {
        if (event.target.classList.contains("sort-btn")) {
            const sortList = document.querySelector('.sort-list');
            const sortBtn = document.querySelector('.sort-btn');
            toggleDisplay(sortList,sortBtn);        
        }
    });
    
  })();