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

  const containerEl = document.querySelector(
    '[shopby-helper-key="event-detail-helper-key"]'
  );

  const { event: eventNoOrId } = utils.getQueryParams(location);
  const eventDetailRequest = {
    eventNo: eventNoOrId,
    sortType: "ADMIN_SETTING",
    soldout: true,
  };

  const redirectLoginPage = () => {
    const nextUrl = "/pages/sign-in/sign-in.html";

    location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`;
  };

  eventDetailHelper.initialize({
    helperKey: "event-detail-helper-key",
  });

  const likeHelper = {
    toggleClassName: (likeEl) => {
      likeEl.classList.toggle("is-active");
    },
    toggleLikeStatus: async (likeEl) => {
      const productNo = likeEl.getAttribute("shopby-product-no") ?? 0;

      await actions.toggleLikeStatus({
        productNo: Number(productNo),
      });
    },
  };

  const CLICK_EVENT_HANDLER_MAP = {
    HANDLE_COUPON_BTN_CLICK: () => {
      if (!utils.isSignIn()) {
        ShopbySkin.EventManager.fire("MODAL_CONFIRM_OPEN", {
          noticeType: "CAUTION",
          message: "<em>로그인하셔야 본 서비스를 이용하실 수 있습니다.</em>",
          onConfirm: redirectLoginPage,
        });

        return;
      }

      const { coupon, eventNo } =
        document.querySelector("event-detail-product-list").store.state ?? {};

      ShopbySkin.EventManager.fire("OPEN_LAYER_MODAL", {
        title: "쿠폰받기",
        name: "coupon-download",
        data: {
          coupons: coupon?.coupons ?? [],
          eventNo,
        },
        isFull: true,
        onClose: () => null,
      });
    },
    HANDLE_SECTION_ID_CLICK: ({ target, helper }) => {
      const tabId = target.getAttribute("shopby-tab-id");
      helper.eventAction.selectEventCategory(tabId);

      scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    LIKE_PRODUCT: ({ target }) => {
      if (!utils.isSignIn()) {
        ShopbySkin.EventManager.fire("MODAL_CONFIRM_OPEN", {
          noticeType: "CAUTION",
          message: "<em>로그인하셔야 본 서비스를 이용하실 수 있습니다.</em>",
          onConfirm: redirectLoginPage,
        });

        return;
      }

      const likeEl = target.closest("[shopby-product-no]");
      likeHelper.toggleClassName(likeEl);
      likeHelper.toggleLikeStatus(likeEl);
    },
    OPEN_PRODUCT_OPTION_MODAL: ({ target }) => {
      target?.preventDefault?.();

      const btn = target.closest("[shopby-product-no]");
      const productNo = Number(btn.getAttribute("shopby-product-no") ?? 0);
      const isSoldOut = utils.convertStringBooleanToBoolean(
        btn.getAttribute("shopby-is-sold-out")
      );

      if (isSoldOut) {
        return;
      }

      if (!utils.isAdultVerified(event)) {
        EventManager.fire("MODAL_CONFIRM_OPEN", {
          message: "성인인증이 필요한 상품입니다.",
          noticeType: constants.NOTICE_MODAL_TYPE.CAUTION,
          onConfirm: () => {
            const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

            location.href = `${nextUrl}?from=${encodeURIComponent(
              location.href
            )}`;
          },
        });

        return;
      }

      utils.isSignIn()
        ? EventManager.fire("OPEN_LAYER_MODAL", {
            name: "select-product-option",
            title: "옵션 선택",
            isFull: false,
            modalAddClass: "select-product-option-modal",
            data: {
              productNo,
            },
          })
        : EventManager.fire("MODAL_CONFIRM_OPEN", {
            message: `로그인하셔야 본 서비스를 이용하실 수 있습니다.`,
            noticeType: constants.NOTICE_MODAL_TYPE.WARNING,
            onConfirm: () => {
              const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

              location.href = `${nextUrl}?from=${encodeURIComponent(
                location.href
              )}`;
            },
          });
    },
  };

  const CHANGE_EVENT_HANDLER_MAP = {
    HANDLE_SORT_CHANGE: ({ target, helper }) => {
      helper.eventAction.fetchEventDetail({
        ...eventDetailRequest,
        sortType: target.value,
      });
    },
  };

  EventManager.fire("INIT_EVENT_PRODUCT_SECTION_SLIDER", {
    spaceBetween: 12,
    direction: "horizontal",
    effect: "slide",
    slidesPerView: "auto",
  });

  EventManager.on("PAGE_LOAD_COMPLETED", () => {
    eventDetailHelper.eventAction.fetchEventDetail(eventDetailRequest);

    EventManager.on("QUERY_DISPLAY_EVENTS_EVENT_NO", (data) => {
      EventManager.fire("CHANGE_SUB_TITLE", {
        subTitle: data?.label,
      });
    });

    // displayMenus가 없으면 상품 목록 숨기기
    const displayMenuEl = document.querySelector("event-detail-display-menu");
    if (!displayMenuEl) return;

    const observer = new MutationObserver(() => {
      const displayMenus = displayMenuEl?.store?.state?.displayMenus;
      if (!displayMenus) return;

      const panelEl = containerEl.querySelector(".product-list__wrapper");

      if ((!displayMenus || displayMenus.length === 0) && panelEl) {
        panelEl.style.display = "none";
      }

      observer.disconnect(); // 감시 종료
    });

    observer.observe(displayMenuEl, {childList: true, subtree: true});
  });

  const clickEventListener = ({ target }) => {
    const actionType =
      target.getAttribute("shopby-action") ??
      target.closest("button")?.getAttribute("shopby-action");

    CLICK_EVENT_HANDLER_MAP[actionType]?.({
      helper: eventDetailHelper,
      target,
    });
  };

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

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

  containerEl.addEventListener("click", clickEventListener);
  containerEl.addEventListener("change", changeEventListener);
})();