import l from "./accelbyte-widgets632.mjs";
import { PurchasedOptionboxDialogLogic as u } from "./accelbyte-widgets633.mjs";
import { Alert as I } from "./accelbyte-widgets123.mjs";
import { Button as c, ButtonType as E, ButtonStyle as h } from "./accelbyte-widgets107.mjs";
import { CommonError as d } from "./accelbyte-widgets124.mjs";
import { Dialog as b, DialogBody as y, DialogFooter as f } from "./accelbyte-widgets235.mjs";
import { CheckMarkIcon as N } from "./accelbyte-widgets634.mjs";
import { Loading as C } from "./accelbyte-widgets136.mjs";
import { ItemImageTag as S } from "./accelbyte-widgets192.mjs";
import { Ctx as x } from "./accelbyte-widgets33.mjs";
import { AlertType as O } from "./accelbyte-widgets128.mjs";
import { EntitlementType as w } from "./accelbyte-widgets185.mjs";
import { ErrorHelper as P } from "./accelbyte-widgets120.mjs";
import { ItemHelper as T } from "./accelbyte-widgets398.mjs";
import v from "./accelbyte-widgets261.mjs";
import D from "classnames";
import e from "react";
import { Trans as a } from "react-i18next";
const k = 31177;
class W extends e.Component {
  constructor(t) {
    var m;
    super(t);
    const { selectedOptionbox: o } = t, r = ((m = x.getAppState().getUser()) == null ? void 0 : m.userId) || null;
    this.state = {
      selectedItemId: ""
    }, this.logic = new u({ selectedOptionbox: o, userId: r }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  onSelectedItemChange(t) {
    this.setState({ selectedItemId: t });
  }
  onSubmit() {
    const { selectedItemId: t } = this.state;
    t && this.logic.claimOptionboxItem(t).then(() => {
      this.logic.state.isClaimingSuccess && this.props.onClose(!0);
    });
  }
  isItemStatusOwned(t) {
    var r;
    const { itemEntitlementStatus: o } = this.logic.state;
    return t.entitlementType === w.enum.DURABLE ? !!((r = o == null ? void 0 : o.get(t.itemId)) != null && r.owned) : !1;
  }
  render() {
    const { isFetching: t, error: o, optionboxItem: r, isSubmitting: m, errorSubmit: n } = this.logic.state, { selectedItemId: s } = this.state, p = P.extractServiceErrorCode(n);
    return /* @__PURE__ */ e.createElement(b, { isOpen: !0, className: l.purchasedOptionboxDialog }, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement("div", { className: "titleContainer" }, /* @__PURE__ */ e.createElement("h1", { className: "title" }, /* @__PURE__ */ e.createElement(a, { i18nKey: "PurchasedItem.optionbox.dialog.title" }, "Option Box Items")), /* @__PURE__ */ e.createElement("p", { className: "titleDescription" }, /* @__PURE__ */ e.createElement(a, { i18nKey: "PurchasedItem.optionbox.dialog.description" }, "Please select an item that you want to claim."))), n && /* @__PURE__ */ e.createElement(I, { type: O.danger, className: "my-6" }, p === k ? /* @__PURE__ */ e.createElement(a, { i18nKey: "PurchasedItem.optionbox.dialog.errorAlreadyOwnedItem" }, "Sorry! You already own this item. Please select another item.") : /* @__PURE__ */ e.createElement(d, { error: n })), t && /* @__PURE__ */ e.createElement(C, { className: "mt-6" }), !t && o && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(d, { error: o })), !t && !o && r && /* @__PURE__ */ e.createElement("div", { className: "itemSelection grid grid-cols-4 gap-6" }, r.map((i, g) => /* @__PURE__ */ e.createElement(
      "div",
      {
        className: D("item", { selected: i.itemId === s, owned: this.isItemStatusOwned(i) }),
        key: g,
        onClick: () => this.onSelectedItemChange(i.itemId)
      },
      /* @__PURE__ */ e.createElement("div", { className: "itemImage" }, /* @__PURE__ */ e.createElement(
        "img",
        {
          alt: "productImage",
          src: T.getFilteredImageUrlByTag(i.images, S.productCover) || v,
          loading: "lazy"
        }
      ), /* @__PURE__ */ e.createElement("div", { className: "ownedLabel" }, /* @__PURE__ */ e.createElement(a, { i18nKey: "PurchasedItem.optionbox.dialog.ownedLabel" }, "Owned")), /* @__PURE__ */ e.createElement("div", { className: "selectedMark" }, /* @__PURE__ */ e.createElement(N, null))),
      /* @__PURE__ */ e.createElement("p", { className: "itemName" }, i.name)
    )))), /* @__PURE__ */ e.createElement(f, { className: l.dialogFooter }, /* @__PURE__ */ e.createElement(
      c,
      {
        className: "btn big btn-ghost mr-3 uppercase",
        buttonType: E.TEXT,
        buttonStyle: h.NONE,
        onClick: () => this.props.onClose(!1)
      },
      /* @__PURE__ */ e.createElement(a, { i18nKey: "common.close" }, "Close")
    ), /* @__PURE__ */ e.createElement(
      c,
      {
        loadingIndicator: "SPINNER",
        className: "btn btn-primary uppercase",
        onClick: () => this.onSubmit(),
        isLoading: m,
        disabled: m || !s
      },
      /* @__PURE__ */ e.createElement(a, { i18nKey: "common.claim" }, "Claim")
    )));
  }
}
export {
  W as PurchasedOptionboxDialog
};
