class PreOrderList extends ShopbySkin.modules.ShopbyElement {
  constructor() {
    super();

    this.store.setState({
      preOrderList: {},
      totalCount: 0,
      isLoading: true,
    });

    this.setPreOrders = async () => {
      const vipId = getCookie('VIP_ID');
      const params = {
        method: 'POST',
        data: {
          vipId,
        },
      };
      const memberPreOrderData = await callGeekApi(
        `/personal/pre-order/check-preorder`,
        params,
      );

      if (memberPreOrderData.statusCode >= 400) {
        memberPreOrderData.result = [];
      } else {
        // [Aaron] 사전예약 상품 이미지 추출
        for (const data of memberPreOrderData.result) {
          const searchParams = {
            queryString: {
              'filter.productManagementCd': data.modelName,
              'filter.soldout': true,
            },
          };
          const { result: productData } = await callShopApi(
            '/products/search?',
            'GET',
            searchParams,
          );
          data.productImg = productData.items?.[0]?.listImageUrls?.[0] ?? null;
          data.productNo = productData.items?.[0]?.productNo ?? null;
          data.purchaseData = JSON.parse(data.purchaseData);
        }
      }
      this.store.setState({
        preOrderList: memberPreOrderData,
        isLoading: false,
        totalCount: memberPreOrderData.result.length,
      });
    };
  }

  async setup() {
    this.store.attach('preOrderList', (state) => {
      this.updateSlot(state, 'preOrder');
    });
    this.store.attach('isLoading', (state) => {
      this.updateSlot(state, 'isLoading');
    });

    await this.setPreOrders();
  }
}

customElements.define('pre-order-list', PreOrderList);

(() => {
  const { EventManager, utils } = ShopbySkin;
  if (!utils.isSignIn()) {
    EventManager.on('PAGE_LOAD_COMPLETED', () => {
      EventManager.fire('MODAL_ALERT_OPEN', {
        message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
        noticeType: 'CAUTION',
        onClose: () => {
          const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;
          location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
        },
      });
    });
  }

  const CLICK_EVENT_HANDLER_MAP = {
    preOrderCancel: async ({ target }) => {
      if (utils.isSignIn()) {
        EventManager.fire('MODAL_CONFIRM_OPEN', {
          message: `사전예약을 취소하시겠습니까?`,
          noticeType: 'CAUTION',
          onConfirm: async () => {
            const vipId = target.getAttribute('data-vip-id');
            const docId = target.getAttribute('data-doc-id');
            const params = {
              method: 'POST',
              data: {
                vipId,
                docId,
              },
            };
            const { result } = await callGeekApi(
              `/personal/pre-order/cancel`,
              params,
            );
            if (result?.affected === 1) {
              EventManager.fire('MODAL_ALERT_OPEN', {
                message: `취소되었습니다.`,
                noticeType: 'CAUTION',
                onClose: () => {
                  location.reload();
                },
              });
            } else {
              EventManager.fire('MODAL_ALERT_OPEN', {
                message: `직원에게 보여주시고, 예약금 취소를 먼저 진행해주세요.`,
                noticeType: 'CAUTION',
                onClose: () => {
                  location.reload();
                },
              });
            }
          },
        });
      } else {
        EventManager.fire('MODAL_ALERT_OPEN', {
          message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
          noticeType: 'CAUTION',
          onClose: () => {
            const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;
            location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
          },
        });
      }
    },
  };

  const containerEl = document.querySelector('pre-order-list');

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

    CLICK_EVENT_HANDLER_MAP[actionType]?.({ target });

    target.classList.add('on');

    Array.from(target.parentNode.children).forEach((sibling) => {
      if (sibling !== target) {
        sibling.classList.remove('on');
      }
    });
  };

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