// [Aaron] 당첨자 발표 게시글 모듈 분리
class CustomArticleList extends ShopbySkin.modules.ArticleList {}
customElements.define('custom-article-list', CustomArticleList);

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

  const $eventList = $('event-list-item'); // 이벤트 리스트 컴포넌트
  const $eventListOne = $('event-list-one'); // 붙여넣을 리스트 데이터 컴포넌트
  const $skeleton = $('skeleton'); // 스켈레톤 컴포넌트

  let placeType = 'EVENTS'; // [Jay] 이벤트 페이지 타입 전역변수
  let pageNumber = 1; // [Jay] 현재 페이지 전역 변수
  const pageSize = 6; // [Jay] 페이징 사이즈 전역 변수

  const url = new URL(window.location.href);
  const searchParams = new URLSearchParams(url.search);

  const boardNo = searchParams.get('boardNo'); // url boardNo 파라미터
  const boardId = searchParams.get('boardId'); // url boardId 파라미터

  // [Jay] 이벤트 게시판인 경우 이벤트 리스트 조회 및 렌더
  if (boardId === null) {
    // [Jay] 스켈레톤 추가
    const skeletonHtml = renderHtml($skeleton);
    $skeleton.append(skeletonHtml);

    // [Jay] 상단탭 active 처리
    $('.event').addClass('active');
    $('.winner').removeClass('active');

    // [Jay] 이벤트 리스트 데이터 조회
    const eventParams = {
      pageNumber: 1,
      pageSize: pageSize,
      eventYn: 'Y',
      progressStatus: 'ING',
      orderBy: 'REGISTER_DATE',
      direction: 'DESC',
    };
    // [Jay] 진행중인 이벤트 기획전 마감순 조회
    const eventListData = await fnGetEventList(eventParams);

    // [Jay] 이벤트 리스트 렌더
    fnEventListRender($eventList, eventListData);

    // [Jay] 스켈레톤 제거
    $('#skeleton').remove();

    // [Jay] 영역 show/hide 처리
    $('.event-contents').show();
    $('.offline-event-contents').hide();
    $('.winner-contents').hide();
  } else if (boardId === 'offlineEvent') {
    // [Jay] 오프라인 이벤트 서브타이틀이 헤더에 붙어서 remove
    EventManager.on('PAGE_LOAD_COMPLETED', () => {
      $('.header__title').remove();
    });

    // [Jay] 상단탭 active 처리
    $('.event').removeClass('active');
    $('.offline-event').addClass('active');
    $('.winner').removeClass('active');

    // [Jay] 영역 show/hide 처리
    $('.event-contents').hide();
    $('.offline-event-contents').show();
    $('.winner-contents').hide();

    // [Aaron] 게시판에 데이터가 없을 경우 노데이터 문구 노출을 위해 isLoading false 처리
    const getArticleListState = document.querySelector('article-list').store.getState();
    if (getArticleListState.totalCount === 0) {
      EventManager.on('PAGE_LOAD_COMPLETED', () => {
        document.querySelector('article-list').store.setState(state => ({
          ...state,
          isLoading: false,
        }))
      });
    }
  } else {
    // [Jay] 당첨자 발표 서브타이틀이 헤더에 붙어서 remove
    EventManager.on('PAGE_LOAD_COMPLETED', () => {
      $('.header__title').remove();
    });

    // [Jay] 상단탭 active 처리
    $('.event').removeClass('active');
    $('.offline-event').removeClass('active');
    $('.winner').addClass('active');

    // [Jay] 영역 show/hide 처리
    $('.event-contents').hide();
    $('.offline-event-contents').hide();
    $('.winner-contents').show();

    // [Aaron] 게시판에 데이터가 없을 경우 노데이터 문구 노출을 위해 isLoading false 처리
    const getArticleListState = document.querySelector('custom-article-list').store.getState();
    if (getArticleListState.totalCount === 0) {
      EventManager.on('PAGE_LOAD_COMPLETED', () => {
        document.querySelector('custom-article-list').store.setState(state => ({
          ...state,
          isLoading: false,
        }))
      });
    }
  }

  const ACTION_HANDLER_MAP = {
    PLACE_TYPE: async ({ event }) => {
      // 이벤트 페이지 타입
      const placeType = $(event.target).data('place-type');
      const offlineEventBoardId = EVENT_PAGE_OFFLINE_BOARDID;
      const winnerBoardId = EVENT_PAGE_WINNER_BOARDID;
      const pageSize = 9;

      // [Jay] 타입에 따른 페이지 분기처리
      if (placeType === 'EVENTS') {
        location.href = '/pages/event/event-place.html';
      } else if (placeType === 'WINNERS') {
        location.href = `/pages/event/event-place.html?boardId=${winnerBoardId}&pageSize=${pageSize}&pageNumber=1`;
      } else if (placeType === 'OFFLINE-EVENTS') {
        location.href = `/pages/event/event-place.html?boardId=${offlineEventBoardId}&pageSize=${pageSize}&pageNumber=1`;
      }
    },
    SORT_LATEST: async ({ event }) => {
      // [Jay] 상단탭 클릭시 pageNumber 1로 초기화
      pageNumber = 1;

      // [Jay] 정렬값 data 속성 변경
      $('.more-event').data('order-by', 'REGISTER_DATE');
      $('.more-event').attr('data-order-by', 'REGISTER_DATE');
      $('.more-event').data('direction', 'DESC');
      $('.more-event').attr('data-direction', 'DESC');
      $('.more-event').data('page-number', pageNumber + 1);
      $('.more-event').attr('data-page-number', pageNumber + 1);

      // 정렬탭 active 설정
      $('.sort').find('span').removeClass('active');
      $(event.target).addClass('active');

      const eventParams = {
        pageNumber: pageNumber,
        pageSize: pageSize,
        orderBy: 'REGISTER_DATE',
      };
      // [Jay] 진행중인 이벤트 기획전 마감순 조회
      const eventListData = await fnGetEventList(eventParams);

      if (placeType === 'EVENTS') {
      } else if (placeType === 'WINNERS') {
      }

      // [Jay] 이벤트 리스트 렌더
      fnEventListRender($eventList, eventListData);
    },
    SORT_DEADLINE: async ({ event }) => {
      // [Jay] 상단탭 클릭시 pageNumber 1로 초기화
      pageNumber = 1;

      // [Jay] 정렬값 data 속성 변경
      $('.more-event').data('order-by', 'END_DATE');
      $('.more-event').attr('data-order-by', 'END_DATE');
      $('.more-event').data('direction', 'ASC');
      $('.more-event').attr('data-direction', 'ASC');
      $('.more-event').data('page-number', pageNumber + 1);
      $('.more-event').attr('data-page-number', pageNumber + 1);

      // 정렬탭 active 설정
      $('.sort').find('span').removeClass('active');
      $(event.target).addClass('active');

      const eventParams = {
        pageNumber: pageNumber,
        pageSize: pageSize,
        orderBy: 'END_DATE',
        direction: 'ASC',
      };
      // [Jay] 진행중인 이벤트 기획전 마감순 조회
      const eventListData = await fnGetEventList(eventParams);

      if (placeType === 'EVENTS') {
        // eventListData = eventList;
      } else if (placeType === 'WINNERS') {
      }

      // [Jay] 이벤트 기획전 리스트 렌더
      fnEventListRender($eventList, eventListData);
    },
    MORE_EVENT: async ({ event }) => {
      const pageNumber = $(event.target).data('page-number'); // 다음 페이지 넘버
      const orderBy = $(event.target).data('order-by'); // 정렬값
      const direction = $(event.target).data('direction'); // 정렬 방향

      $(event.target).data('page-number', pageNumber + 1);
      $(event.target).attr('data-page-number', pageNumber + 1);

      const eventParams = {
        pageNumber: pageNumber,
        pageSize: pageSize,
        orderBy: orderBy,
        direction: direction,
      };

      // [Jay] 진행중인 이벤트 기획전 마감순 조회
      const eventListData = await fnGetEventList(eventParams);

      if (placeType === 'EVENTS') {
      } else if (placeType === 'WINNERS') {
      }

      // [Jay] 총 갯수가 페이지에서 보여져야 할 갯수보다 적은 경우 더보기 숨김처리
      if (eventListData.totalCount <= pageNumber * pageSize) {
        $('.more-btn-box').hide();
      } else {
        $('.more-btn-box').show();
      }

      // [Jay] 이벤트 기획전 리스트 렌더
      const couponListHtml = renderHtml($eventListOne, eventListData.contents);
      $('.event-list').append(couponListHtml);
      $('.event').velocity({ opacity: 1 }, { duration: 500 });
    },
  };

  /**
   * [Jay] 이벤트 리스트 조회
   * @param params
   * @returns {Promise<*>}
   */
  async function fnGetEventList(params) {
    // [Jay] 이벤트 조회
    const eventParams = {
      queryString: {
        'page.number': params.pageNumber ?? 1,
        'page.size': params.pageSize ?? 10,
        eventYn: 'Y',
        progressStatus: 'ING',
        'order.by': params.orderBy ?? 'REGISTER_DATE',
        'order.direction': params.direction ?? 'DESC',
      },
      version: '2.0',
    };

    const eventListRes = await callShopApi(
      '/display/events/?',
      'GET',
      eventParams,
    );

    // [KR] 이벤트 종료 남은기간 설정
    if (eventListRes?.result?.contents?.length || 0 > 0) {
      eventListRes?.result?.contents.map((val) => {
        if (val.displayPeriodType === 'PERIOD') {
          //const start = moment(val.startYmdt, 'YYYY-MM-DD H:i:s');
          const start = moment().format();
          const end = moment(val.endYmdt, 'YYYY-MM-DD H:i:s');
          // 남은 시간 계산 후 일 단위로 변환
          const remainingDays = Math.floor(
            moment.duration(end.diff(start)).asDays(),
          );
          val.daysLeft = remainingDays;
        }
      });
    }
    return eventListRes.result;
  }

  /**
   * [Jay] 이벤트 리스트 렌더링
   * @param template
   * @param data
   */
  function fnEventListRender(template, data) {
    // [Jay] 이벤트 갯수 카운트 변경
    $('.total-count strong').text(data.totalCount);

    const listData = data.contents;

    // [Jay] 페이지에서 보여주는 값보다 totalCount가 작으면 더보기 숨김
    if (data.totalCount <= pageNumber * pageSize) {
      $('.more-btn-box').hide();
    } else {
      $('.more-btn-box').show();
    }

    // [Jay] 이벤트 리스트 렌더
    $('.event-list').remove();
    const couponListHtml = renderHtml(template, listData);
    $eventList.append(couponListHtml);

    // velocity
    $eventList.css('opacity', '0');
    $eventList.velocity({ opacity: 1 }, { duration: 500 });
  }

  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;
    }

    ACTION_HANDLER_MAP[action]?.({
      event: e,
    });
  };

  document.addEventListener('click', clickEventListener);
})();