import { O as OrderAppManager, I as ItemDetailPurchaseAlert, C as CatalogItemBanner, B as Breadcrumbs, A as AppDetailGallery, L as Lightbox, a as CatalogOverview, b as CatalogTitleWidget, D as DiscountCountdownWidget, c as CatalogPurchaseWidget, d as InAppStore } from "./ItemDetailPurchaseAlert.js";
import { w as withPropsGuard } from "./WithPropsGuard.js";
import { I as ItemHelper } from "./ItemHelper.js";
import { C as Container, a as Ctx, ac as EligibleUser, T as Trans, a2 as EcomPath, E as ErrorHelper, q as EcommerceErrorCode, ad as gaSendErrorEvent, r as ErrorPath, F as FeUtils, a7 as ItemType } from "./index.js";
import React__default from "react";
import { a as Helmet } from "./Helmet.js";
import { Link } from "react-router-dom";
import { ItemDetailPageLoadingScreen, ItemDetailPageError } from "./InGameItemDetailPage.js";
import { d as defaultItemImage } from "./default-item-image.js";
import { c as classNames } from "./reactSlick.js";
import "./reactPlayer.js";
import "./dateFns.js";
import "./SuccessFlatIcon.js";
import "./WarningIcon.js";
import "./PendingOrdersAppManager.js";
import "./PaymentStatusDialog.js";
import "./Radio.js";
import "./validator.js";
import "./CommonError.js";
import "./starBgGradient.js";
import "./CommonError2.js";
class OptionboxItemDetailPageLogic extends Container {
  constructor(props) {
    super();
    this.props = props;
    this.state = {
      optionboxItem: null,
      itemsInOptionbox: [],
      isFetching: false,
      error: null,
      itemPublishingContent: null,
      itemPublishingContentError: null
    };
    this.sdk = Ctx.getAppState().getSdk();
  }
  async init() {
    var _a, _b;
    try {
      if (this.state.isFetching)
        return;
      this.setState({
        isFetching: true,
        optionboxItem: null,
        itemsInOptionbox: [],
        error: null
      });
      const optionboxItem = await this.fetchOptionboxItem();
      await this.initPurchaseLogic(optionboxItem);
      const itemIds = (_b = (_a = optionboxItem.optionBoxConfig) == null ? void 0 : _a.boxItems) == null ? void 0 : _b.filter(({ itemId }) => !!itemId).map(({ itemId }) => itemId);
      const itemsInBundle = await this.fetchItemsInOptionbox(itemIds || []);
      this.setState({
        optionboxItem,
        itemsInOptionbox: itemsInBundle,
        itemPublishingContent: null
      });
    } catch (error) {
      console.error(error);
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
  fetchOptionboxItem() {
    const { itemId, country, language } = this.props;
    return this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId, queryParams: { language, region: country } }).then((result) => {
      if (result.error)
        throw result.error;
      return result.response.data;
    });
  }
  async fetchItemsInOptionbox(itemIds) {
    if (itemIds.length === 0)
      return [];
    const { language, country } = this.props;
    return await this.sdk.Platform.Item().getItemsByItemIds({
      queryParams: { language, region: country, itemIds: itemIds.toString() }
    }).then((result) => {
      if (result.error)
        throw result.error;
      return result.response.data;
    });
  }
  async initPurchaseLogic(item) {
    const { user } = this.props;
    const purchaseLogic = this.purchaseLogic = new OrderAppManager(this.sdk, {
      item,
      userId: EligibleUser.safeParse(user).success && (user == null ? void 0 : user.userId) || null
    });
    purchaseLogic.subscribe(() => this.setState({}));
    await purchaseLogic.init();
    const { fetchError } = purchaseLogic.state;
    if (fetchError)
      throw fetchError;
  }
}
const catalogOptionboxItemList = "catalogOptionboxItemList _catalogOptionboxItemList_61250";
var styles = {
  catalogOptionboxItemList
};
const CatalogOptionboxItem = ({ link, thumbnail, name, type, quantity }) => /* @__PURE__ */ React__default.createElement(Link, {
  to: link,
  className: "catalogItem"
}, /* @__PURE__ */ React__default.createElement("div", {
  className: "catalogItemImage"
}, /* @__PURE__ */ React__default.createElement("img", {
  src: thumbnail || defaultItemImage,
  loading: "lazy"
})), /* @__PURE__ */ React__default.createElement("div", {
  className: "catalogItemDetail"
}, /* @__PURE__ */ React__default.createElement("div", {
  className: "catalogItemHeading"
}, name), /* @__PURE__ */ React__default.createElement("div", {
  className: "catalogItemType"
}, type), /* @__PURE__ */ React__default.createElement("div", {
  className: "catalogItemQty"
}, quantity > 1 && `x${quantity}`)));
class CatalogOptionboxItemList extends React__default.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { items, optionboxItem } = this.props;
    return /* @__PURE__ */ React__default.createElement("div", {
      className: classNames(styles.catalogOptionboxItemList, "catalogOptionboxItemList")
    }, /* @__PURE__ */ React__default.createElement("h2", {
      className: "catalogHeading"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "CatalogOptionboxItemList.heading"
    }, "Inside The Option Box")), items.length > 0 && /* @__PURE__ */ React__default.createElement("div", {
      className: "catalogList"
    }, items.map((item) => {
      const type = item.appType || item.itemType;
      const itemCoverImageUrl = item.thumbnailUrl || defaultItemImage;
      return /* @__PURE__ */ React__default.createElement(CatalogOptionboxItem, {
        key: item.itemId,
        link: EcomPath.getItemDetailRoute(item),
        thumbnail: itemCoverImageUrl,
        name: item.title || item.name || "",
        type,
        quantity: optionboxItem.itemQty ? optionboxItem.itemQty[item.itemId] : 1
      });
    })), items.length === 0 && /* @__PURE__ */ React__default.createElement("div", {
      className: "catalogNoItem"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "CatalogOptionboxItemList.noItem"
    }, "Looks like there aren't any optionbox item yet.")));
  }
}
class OptionboxItemDetailPage extends React__default.Component {
  constructor(props) {
    super(props);
    this.openLightbox = (selectedImagePosition) => {
      this.setState({ isLightboxOpen: true, selectedImagePosition });
    };
    this.closeLightbox = () => {
      this.setState({ isLightboxOpen: false });
    };
    const { itemId, country, language, user } = this.props;
    this.logic = new OptionboxItemDetailPageLogic({ itemId, country, language, user });
    this.logic.subscribe(() => this.setState({}));
    this.state = {
      isLightboxOpen: false,
      selectedImagePosition: 0
    };
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { user } = this.props;
    const { isFetching, optionboxItem, error, itemsInOptionbox, itemPublishingContent } = this.logic.state;
    if (error && ErrorHelper.extractServiceErrorCode(error) === EcommerceErrorCode.ITEM_NOT_FOUND) {
      gaSendErrorEvent({ eventCategory: ErrorPath.Error404.makePath(), eventLabel: ErrorHelper.errorToString(error) });
    }
    const { purchaseLogic } = this.logic;
    const currencyMap = purchaseLogic && purchaseLogic.state.currencyMap;
    const { isLightboxOpen, selectedImagePosition } = this.state;
    const itemMedias = ItemHelper.getMedia(optionboxItem, itemPublishingContent);
    return /* @__PURE__ */ React__default.createElement("main", {
      className: "itemDetailPage"
    }, /* @__PURE__ */ React__default.createElement(ItemDetailPurchaseAlert, {
      ...{
        purchaseLogic,
        user,
        isFetching
      }
    }), /* @__PURE__ */ React__default.createElement(Helmet, null, optionboxItem && /* @__PURE__ */ React__default.createElement("title", null, FeUtils.makeTitleWithAppName(optionboxItem.title))), isFetching && /* @__PURE__ */ React__default.createElement(ItemDetailPageLoadingScreen, null), error && /* @__PURE__ */ React__default.createElement(ItemDetailPageError, {
      error
    }), optionboxItem && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CatalogItemBanner, {
      item: optionboxItem,
      itemPublishingContent
    }, /* @__PURE__ */ React__default.createElement(Breadcrumbs, null, /* @__PURE__ */ React__default.createElement(Link, {
      to: EcomPath.GameList.makePath()
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "Navigation.links.games"
    }, "Games")), optionboxItem.title)), itemMedias && /* @__PURE__ */ React__default.createElement(AppDetailGallery, {
      itemMedias,
      openLightbox: this.openLightbox
    }), isLightboxOpen && itemMedias && /* @__PURE__ */ React__default.createElement(Lightbox, {
      itemMedias,
      isOpen: isLightboxOpen,
      onClose: this.closeLightbox,
      selectedPosition: selectedImagePosition
    }), /* @__PURE__ */ React__default.createElement("div", {
      className: "itemDetailContent"
    }, /* @__PURE__ */ React__default.createElement("div", {
      className: "description"
    }, /* @__PURE__ */ React__default.createElement(CatalogOptionboxItemList, {
      items: itemsInOptionbox,
      optionboxItem
    }), /* @__PURE__ */ React__default.createElement(CatalogOverview, {
      item: optionboxItem
    })), /* @__PURE__ */ React__default.createElement("div", {
      className: "detailWidget"
    }, /* @__PURE__ */ React__default.createElement(CatalogTitleWidget, {
      item: optionboxItem
    }, currencyMap && /* @__PURE__ */ React__default.createElement(DiscountCountdownWidget, {
      item: optionboxItem,
      currencyMap,
      position: "right",
      showDetail: true
    })), /* @__PURE__ */ React__default.createElement("div", {
      className: "protruded"
    }, /* @__PURE__ */ React__default.createElement(CatalogPurchaseWidget, {
      item: optionboxItem,
      purchaseLogic
    })))), /* @__PURE__ */ React__default.createElement("div", {
      className: "storeContainer"
    }, /* @__PURE__ */ React__default.createElement("h2", null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "OptionboxItemDetailPage.relatedItems.heading"
    }, "Related Items")), /* @__PURE__ */ React__default.createElement(InAppStore, {
      baseItem: optionboxItem,
      language: this.props.language,
      itemType: ItemType.enum.OPTIONBOX,
      noItemMessage: /* @__PURE__ */ React__default.createElement("div", {
        className: "noItem"
      }, /* @__PURE__ */ React__default.createElement(Trans, {
        i18nKey: "OptionboxItemDetailPage.relatedItems.noItem"
      }, "Looks like there are no related items yet."))
    }))));
  }
}
var OptionboxItemDetailPage$1 = withPropsGuard(({ itemId, language }) => {
  const user = Ctx.getAppState().getUser() || void 0;
  const country = user && user.country || void 0;
  return /* @__PURE__ */ React__default.createElement(OptionboxItemDetailPage, {
    itemId,
    country,
    user,
    language
  });
}, (prevProps, nextProps) => prevProps.itemId !== nextProps.itemId || nextProps.language !== prevProps.language);
export { OptionboxItemDetailPage$1 as default };
