import { O as x, I as y, C as O, B as f, A as L, L as P, a as C, b as v, D as N, c as D, d as S } from "./ItemDetailPurchaseAlert-3cdb1ea7.mjs";
import { w as k } from "./WithPropsGuard-9dd19ecc.mjs";
import { I as w } from "./ItemHelper-37a12c2c.mjs";
import { C as T, a as I, w as _, T as m, ab as d, y as h, G as B, ag as F, K as A, F as M, ad as K } from "./index-162fd1aa.mjs";
import e from "react";
import { a as U } from "./Helmet-ed6d5573.mjs";
import { Link as u } from "react-router-dom";
import { ItemDetailPageLoadingScreen as G, ItemDetailPageError as H } from "./InGameItemDetailPage-2ff05429.mjs";
import { d as b } from "./default-item-image-9aab0e29.mjs";
import { c as W } from "./reactSlick-cb4a2d39.mjs";
import "./reactPlayer-2f69f369.mjs";
import "./dateFns-2367ee5b.mjs";
import "./SuccessFlatIcon-54f5f907.mjs";
import "./WarningIcon-c5874dd2.mjs";
import "./PendingOrdersAppManager-4782fef4.mjs";
import "./PaymentStatusDialog-3afb3b20.mjs";
import "./Radio-b897ba55.mjs";
import "./MockVars-1cf2eb0a.mjs";
import "./validator-61879ab7.mjs";
import "./CommonError-0ae83068.mjs";
import "./starBgGradient-589e5185.mjs";
import "./CommonError-4ed993c7.mjs";
class Q extends T {
  constructor(a) {
    super(), this.props = a, this.state = {
      optionboxItem: null,
      itemsInOptionbox: [],
      isFetching: !1,
      error: null,
      itemPublishingContent: null,
      itemPublishingContentError: null
    }, this.sdk = I.getAppState().getSdk();
  }
  async init() {
    var a, i;
    try {
      if (this.state.isFetching)
        return;
      this.setState({
        isFetching: !0,
        optionboxItem: null,
        itemsInOptionbox: [],
        error: null
      });
      const t = await this.fetchOptionboxItem();
      await this.initPurchaseLogic(t);
      const o = (i = (a = t.optionBoxConfig) == null ? void 0 : a.boxItems) == null ? void 0 : i.filter(({ itemId: n }) => !!n).map(({ itemId: n }) => n), r = await this.fetchItemsInOptionbox(o || []);
      this.setState({
        optionboxItem: t,
        itemsInOptionbox: r,
        itemPublishingContent: null
      });
    } catch (t) {
      console.error(t), this.setState({ error: t });
    } finally {
      this.setState({ isFetching: !1 });
    }
  }
  fetchOptionboxItem() {
    const { itemId: a, country: i, language: t } = this.props;
    return this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId: a, queryParams: { language: t, region: i } }).then((o) => {
      if (o.error)
        throw o.error;
      return o.response.data;
    });
  }
  async fetchItemsInOptionbox(a) {
    if (a.length === 0)
      return [];
    const { language: i, country: t } = this.props;
    return await this.sdk.Platform.Item().getItemsByItemIds({
      queryParams: { language: i, region: t, itemIds: a.toString() }
    }).then((o) => {
      if (o.error)
        throw o.error;
      return o.response.data;
    });
  }
  async initPurchaseLogic(a) {
    const { user: i } = this.props, t = this.purchaseLogic = new x(this.sdk, {
      item: a,
      userId: _.safeParse(i).success && (i == null ? void 0 : i.userId) || null
    });
    t.subscribe(() => this.setState({})), await t.init();
    const { fetchError: o } = t.state;
    if (o)
      throw o;
  }
}
const R = "catalogOptionboxItemList _catalogOptionboxItemList_25bcf", q = {
  catalogOptionboxItemList: R
}, $ = ({ link: s, thumbnail: a, name: i, type: t, quantity: o }) => /* @__PURE__ */ e.createElement(u, { to: s, className: "catalogItem" }, /* @__PURE__ */ e.createElement("div", { className: "catalogItemImage" }, /* @__PURE__ */ e.createElement("img", { src: a || b, loading: "lazy" })), /* @__PURE__ */ e.createElement("div", { className: "catalogItemDetail" }, /* @__PURE__ */ e.createElement("div", { className: "catalogItemHeading" }, i), /* @__PURE__ */ e.createElement("div", { className: "catalogItemType" }, t), /* @__PURE__ */ e.createElement("div", { className: "catalogItemQty" }, o > 1 && `x${o}`)));
class z extends e.Component {
  constructor(a) {
    super(a);
  }
  render() {
    const { items: a, optionboxItem: i } = this.props;
    return /* @__PURE__ */ e.createElement("div", { className: W(q.catalogOptionboxItemList, "catalogOptionboxItemList") }, /* @__PURE__ */ e.createElement("h2", { className: "catalogHeading" }, /* @__PURE__ */ e.createElement(m, { i18nKey: "CatalogOptionboxItemList.heading" }, "Inside The Option Box")), a.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "catalogList" }, a.map((t) => {
      const o = t.appType || t.itemType, r = t.thumbnailUrl || b;
      return /* @__PURE__ */ e.createElement(
        $,
        {
          key: t.itemId,
          link: d.getItemDetailRoute(t),
          thumbnail: r,
          name: t.title || t.name || "",
          type: o,
          quantity: i.itemQty ? i.itemQty[t.itemId] : 1
        }
      );
    })), a.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "catalogNoItem" }, /* @__PURE__ */ e.createElement(m, { i18nKey: "CatalogOptionboxItemList.noItem" }, "Looks like there aren't any optionbox item yet.")));
  }
}
class X extends e.Component {
  constructor(a) {
    super(a), this.openLightbox = (n) => {
      this.setState({ isLightboxOpen: !0, selectedImagePosition: n });
    }, this.closeLightbox = () => {
      this.setState({ isLightboxOpen: !1 });
    };
    const { itemId: i, country: t, language: o, user: r } = this.props;
    this.logic = new Q({ itemId: i, country: t, language: o, user: r }), this.logic.subscribe(() => this.setState({})), this.state = {
      isLightboxOpen: !1,
      selectedImagePosition: 0
    };
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { user: a } = this.props, { isFetching: i, optionboxItem: t, error: o, itemsInOptionbox: r, itemPublishingContent: n } = this.logic.state;
    o && h.extractServiceErrorCode(o) === B.ITEM_NOT_FOUND && F({ eventCategory: A.Error404.makePath(), eventLabel: h.errorToString(o) });
    const { purchaseLogic: l } = this.logic, g = l && l.state.currencyMap, { isLightboxOpen: p, selectedImagePosition: E } = this.state, c = w.getMedia(t, n);
    return /* @__PURE__ */ e.createElement("main", { className: "itemDetailPage" }, /* @__PURE__ */ e.createElement(
      y,
      {
        purchaseLogic: l,
        user: a,
        isFetching: i
      }
    ), /* @__PURE__ */ e.createElement(U, null, t && /* @__PURE__ */ e.createElement("title", null, M.makeTitleWithAppName(t.title))), i && /* @__PURE__ */ e.createElement(G, null), o && /* @__PURE__ */ e.createElement(H, { error: o }), t && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(O, { item: t, itemPublishingContent: n }, /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(u, { to: d.GameList.makePath() }, /* @__PURE__ */ e.createElement(m, { i18nKey: "Navigation.links.games" }, "Games")), t.title)), c && /* @__PURE__ */ e.createElement(L, { itemMedias: c, openLightbox: this.openLightbox }), p && c && /* @__PURE__ */ e.createElement(
      P,
      {
        itemMedias: c,
        isOpen: p,
        onClose: this.closeLightbox,
        selectedPosition: E
      }
    ), /* @__PURE__ */ e.createElement("div", { className: "itemDetailContent" }, /* @__PURE__ */ e.createElement("div", { className: "description" }, /* @__PURE__ */ e.createElement(z, { items: r, optionboxItem: t }), /* @__PURE__ */ e.createElement(C, { item: t })), /* @__PURE__ */ e.createElement("div", { className: "detailWidget" }, /* @__PURE__ */ e.createElement(v, { item: t }, g && /* @__PURE__ */ e.createElement(N, { item: t, currencyMap: g, position: "right", showDetail: !0 })), /* @__PURE__ */ e.createElement("div", { className: "protruded" }, /* @__PURE__ */ e.createElement(D, { item: t, purchaseLogic: l })))), /* @__PURE__ */ e.createElement("div", { className: "storeContainer" }, /* @__PURE__ */ e.createElement("h2", null, /* @__PURE__ */ e.createElement(m, { i18nKey: "OptionboxItemDetailPage.relatedItems.heading" }, "Related Items")), /* @__PURE__ */ e.createElement(
      S,
      {
        baseItem: t,
        language: this.props.language,
        itemType: K.enum.OPTIONBOX,
        noItemMessage: /* @__PURE__ */ e.createElement("div", { className: "noItem" }, /* @__PURE__ */ e.createElement(m, { i18nKey: "OptionboxItemDetailPage.relatedItems.noItem" }, "Looks like there are no related items yet."))
      }
    ))));
  }
}
const be = k(
  ({ itemId: s, language: a }) => {
    const i = I.getAppState().getUser() || void 0, t = i && i.country || void 0;
    return /* @__PURE__ */ e.createElement(X, { itemId: s, country: t, user: i, language: a });
  },
  (s, a) => s.itemId !== a.itemId || a.language !== s.language
);
export {
  be as default
};
