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

  const containerEl = document.querySelector(
    '[shopby-helper-key="event-list-helper-key"]',
  );
  const eventListHelper = pageHelper.eventListHelper();

  // actions.getEventAction()을 호출하여 eventAction을 가져옵니다.
  const eventAction = actions.getEventAction();

  // fetchEvents를 직접 호출하지 않고 초기화 시에 파라미터를 설정할 수 있도록 수정합니다.
  eventListHelper.initialize({
    helperKey: 'event-list-helper-key',
    eventAction: {
      ...eventAction,
      fetchEvents: (params = {}, option) => {
        // 기본 파라미터를 설정하고 병합합니다.
        const mergedParams = {
          eventYn: 'N', // 기본 eventYn 파라미터
          ...params, // 전달된 params와 병합
        };

        // fetchEvents 호출
        return eventAction.fetchEvents(mergedParams, option);
      },
    },
  });

  const CLICK_EVENT_HANDLER_MAP = {
    MOVE_PRODUCT_DETAIL: ({ target }) => {
      const productNo = $(target).parents('.thumb-item').data('product-no');
      location.href = `/pages/product/product-detail.html?productNo=${productNo}`;
    },
    GO_EVENT_DETAIL: ({ target }) => {
      const _target = target.closest('[shopby-link]');

      const url = _target.getAttribute('shopby-url');
      const progressStatus = _target.getAttribute('shopby-progress-status');
      const eventNo = _target.getAttribute('shopby-event-no');
      const eventId = _target.getAttribute('shopby-event-id');

      if (progressStatus !== 'ING') {
        EventManager.fire('MODAL_ALERT_OPEN', {
          noticeType: 'CAUTION',
          message: '<em>현재 진행중인 기획전이 아닙니다.</em>',
        });

        return;
      }

      const getUrl = ({ url, eventNo, eventId }) => {
        if (url) {
          return url;
        }

        return `/pages/event/event-detail.html?event=${eventId || eventNo}`;
      };

      location.href = getUrl({
        url,
        eventNo,
        eventId,
      });
    },
    HANDLE_SORT_TYPE_CLICK: ({ target }) => {
      $(target).parent().children().removeClass('active');
      target.classList.add('active');
      EventManager.fire(
        'HANDLE_EVENT_LIST_SORT_TYPE_CHANGE',
        target.getAttribute('sort-type'),
      );
    },
  };

  const clickEventListener = (event) => {
    event.preventDefault();

    const actionType =
      event.target?.getAttribute('shopby-action') ??
      event.target.closest('[shopby-action]')?.getAttribute('shopby-action');
    CLICK_EVENT_HANDLER_MAP[actionType]?.({
      helper: eventListHelper,
      target: event.target,
    });
  };

  const changeEventListener = ({ target }) => {
    const actionType = target.getAttribute('shopby-action');

    CHANGE_EVENT_HANDLER_MAP[actionType]?.({
      helper: eventListHelper,
      target,
    });
  };

  containerEl.addEventListener('click', clickEventListener);
  containerEl.addEventListener('change', changeEventListener);

  EventManager.on('PAGE_LOAD_COMPLETED', () => {
    EventManager.fire('INIT_EVENTS');
  });

  EventManager.on('QUERY_DISPLAY_EVENTS', async (data) => {
    // [KR] 모바일 더보기의 경우 resetState를 통해 기존 리스트와 합치기 때문에 reset된 state 데이터를 가져와서 작업을 해야 함.
    const contentsData = document
      .querySelector('event-list')
      .store.getState().contents;

    const eventNos = [];
    for (const key in contentsData) {
      if (!contentsData[key]['products']) {
        const eventNo = contentsData[key]['eventNo'];
        eventNos.push(eventNo);
      }
    }

    // [KR] 기획전에 설정된 상품 리스트 추가
    const result = await callShopApi('/display/events/search-by-nos?', 'GET', {
      queryString: {
        eventNos: eventNos.join(','),
        countPerEvent: 2, // 등록된 상품은 2개 까지만 조회
      },
    });

    const eventList = result.result;

    for (const key in eventList) {
      const event = eventList[key]['event'];
      const products = eventList[key]['products'];
      const eventNo = event?.eventNo || '';
      const content = contentsData.find((data) => data.eventNo === eventNo);
      if (content) {
        content.products = products;
      }
    }

    const contents = contentsData;

    document.querySelector('event-list').store.setState((prev) => ({
      ...prev,
      contents,
    }));
  });
})();