(async () => {
  const { EventManager, pageHelper } = ShopbySkin;
  const myCouponListHelper = pageHelper.myCouponListHelper();
  const $couponCount = $('coupon-count'); // 쿠폰 개수
  const $couponTypeTabs = $('coupon-type-tabs'); // 쿠폰 탭
  const $couponListItem = $('coupon-list-item'); // 쿠폰 리스트

  const searchParams = new URLSearchParams(location.search);
  const params = Object.fromEntries(searchParams.entries());

  myCouponListHelper.initialize({
    ...params,
    tab: params.usable === 'false' ? 'UNISSUABLE' : 'ISSUABLE',
  });

  const couponParams = {
    queryString: {
      pageNumber: 1,
      pageSize: 100,
      usable: true
    },
    accessTokenType: 'member',
  };
  // [Aaron] 상품, 주문 쿠폰 개수 추출 후 렌더
  const { result: couponData } = await callShopApi(
    '/coupons?',
    'GET',
    couponParams,
  );
  // 상품 쿠폰
  const productCoupon = couponData.items.filter(
    (coupon) => coupon.couponType === 'PRODUCT',
  );
  // 주문 쿠폰
  const cartCoupon = couponData.items.filter(
    (coupon) => coupon.couponType === 'CART',
  );
  const couponCountData = {
    productCouponCnt: productCoupon.length,
    cartCouponCnt: cartCoupon.length,
  };
  const couponCountHtml = renderHtml($couponCount, couponCountData);
  $couponCount.append(couponCountHtml);
  // END

  // [Aaron] 쿠폰 탭 렌더
  const couponTypeTabsHtml = renderHtml($couponTypeTabs, couponCountData);
  $couponTypeTabs.append(couponTypeTabsHtml);

  // [Aaron] 쿠폰 리스트 렌더
  const couponListItem = renderHtml($couponListItem, productCoupon);
  $couponListItem.append(couponListItem);

  const moduleActionHandler = {
    REGISTER: () => {
      EventManager.fire('OPEN_LAYER_MODAL', {
        name: 'coupon-register-form',
        title: '쿠폰 등록',
        modalAddClass: 'coupon-registration-modal',
        isFull: false,
        onClose: ({ reason }) => {
          if (reason === 'DID_SUBMIT') {
            EventManager.fire('MODAL_ALERT_OPEN', {
              noticeType: 'SUCCESS',
              message: '<em>쿠폰이 등록이 완료되었습니다.</em>',
              onClose: () => {
                location.reload();
              },
            });
          }
        },
      });
    },

    COUPON_TYPE: (target) => {
      const couponType = target.getAttribute('coupon-type');
      const couponTypeTabsEl = document.querySelector('coupon-type-tabs');
      $(target).parent().children().removeClass('active');
      target.classList.add('active');

      let couponData;
      if (couponType === 'product') couponData = productCoupon;
      if (couponType === 'cart') couponData = cartCoupon;

      // [Aaron] 쿠폰 리스트 렌더
      $('.coupon-list').remove();
      const couponListItem = renderHtml($couponListItem, couponData);
      $couponListItem.append(couponListItem);
    },

    USE_COUPON: async (target) => {
      const couponListModule = document.querySelector('coupon-list');
      const couponIssueNo = target.getAttribute('shopby-coupon-issue-no');

      let noticeType, message;
      try {
        await couponListModule.useGiftCoupon(couponIssueNo);
        noticeType = 'SUCCESS';
        message = '<em>혜택 지급이 완료되었습니다.</em>';
      } catch (error) {
        noticeType = 'CAUTION';
        message = `<em>${error.error.serverError.message}</em>`;
      }

      EventManager.fire('MODAL_ALERT_OPEN', {
        noticeType,
        message,
        onClose: () => {
          location.reload();
        },
      });
    },
  };

  document
    .querySelector('coupon-total-count')
    ?.addEventListener('click', ({ target }) => {
      const action = target.getAttribute('shopby-action');
      moduleActionHandler[action]?.();
    });

  document
    .querySelector('coupon-type-tabs')
    ?.addEventListener('click', ({ target }) => {
      const actionTarget = target.getAttribute('shopby-action');
      if (!actionTarget) {
        return;
      }

      moduleActionHandler[actionTarget](target);
    });
})();