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

  const containerEl = document.querySelector('[shopby-helper-key="event-list-helper-key"]');
  const eventListHelper = pageHelper.eventListHelper();
  const searchParams = new URLSearchParams(location.search);

  eventListHelper.initialize({
    helperKey: 'event-list-helper-key',
    eventAction: actions.getEventAction(),
  });

  const getUrl = ({ url, eventNo, eventId, urlType }) => {
    if (url && urlType === 'DIRECT') {
      return url;
    }

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

  EventManager.on('QUERY_DISPLAY_EVENTS', (data) => {
    document.querySelectorAll('.event-list__date span').forEach((el) => {
      el.innerHTML = el.innerHTML.replaceAll('-', '.');
    });
  });

  const selectCurrentTab = () => {
    const progressStatus = searchParams.get('progressStatus');
    document.querySelectorAll('.dev-event').forEach((el) => el.classList.remove('on'));

    if (progressStatus === 'END') {
      document.querySelector('.dev-event[data-status="END"]')?.classList.add('on');
    } else {
      document.querySelector('.dev-event[data-status="ING"]')?.classList.add('on');
    }
  };

  const CLICK_EVENT_HANDLER_MAP = {
    GO_EVENT_DETAIL: ({ target, event }) => {
      event.preventDefault();

      const _target = target.closest('[shopby-link]');

      const url = _target.getAttribute('shopby-url');
      const urlType = _target.getAttribute('shopby-url-type');
      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;
      }

      location.href = getUrl({
        url,
        eventNo,
        eventId,
        urlType,
      });
    },
    HANDLE_SORT_TYPE_CLICK: ({ target }) => {
      const tab = target?.getAttribute('shopby-tab');

      if (!tab) {
        return;
      }

      EventManager.fire('HANDLE_EVENT_LIST_SORT_TYPE_CHANGE', tab);
    },
  };

  const clickEventListener = (event) => {
    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,
      event,
    });
  };

  containerEl.addEventListener('click', clickEventListener);

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