import { PurchasedOptionboxDialog as h } from "./accelbyte-widgets580.mjs";
import { Alert as x } from "./accelbyte-widgets123.mjs";
import { CommonError as g } from "./accelbyte-widgets124.mjs";
import { Loading as b } from "./accelbyte-widgets136.mjs";
import { Pagination as f } from "./accelbyte-widgets256.mjs";
import E from "./accelbyte-widgets210.mjs";
import { Ctx as O } from "./accelbyte-widgets33.mjs";
import { AlertType as w } from "./accelbyte-widgets128.mjs";
import { AccPath as p } from "./accelbyte-widgets34.mjs";
import e from "react";
import { Trans as c } from "react-i18next";
import { PurchasedOptionboxLogic as y } from "./accelbyte-widgets581.mjs";
const N = 10;
class P extends e.Component {
  constructor(r) {
    var l;
    super(r), this.openOptionboxDialog = (s) => {
      const { optionboxLists: t } = this.logic.state, o = (t == null ? void 0 : t.data) && t.data[s];
      o && this.setState({
        selectedOptionbox: o
      });
    }, this.closeOptionboxDialog = (s) => {
      this.setState({ selectedOptionbox: null }), s && (this.setState({ showSuccessMessage: !0 }), this.logic.init());
    }, this.renderTableOrder = (s) => {
      var t;
      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 mb-4 hidden border-b py-2 md:flex" }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row" }, /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "PurchasedItem.optionbox.table.name" }, "Name")), /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "PurchasedItem.optionbox.table.count" }, "Count")))), (t = s == null ? void 0 : s.data) == null ? void 0 : t.map((o, i) => /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 my-6 flex border-b pb-6 md:mb-4 md:mt-0 md:pb-4", key: i }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row md:items-center" }, /* @__PURE__ */ e.createElement("div", { className: "text-sm text-[color:rgb(var(--od-rgb-text))] md:w-1/2" }, /* @__PURE__ */ e.createElement("p", null, o.name)), /* @__PURE__ */ e.createElement("div", { className: "mt-4 text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:mt-0 md:w-1/2" }, o.useCount)), /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col items-end md:w-1/5 md:flex-row md:items-center md:text-right" }, /* @__PURE__ */ e.createElement("button", { className: "text-blue-40 text-sm font-medium", onClick: () => this.openOptionboxDialog(i) }, /* @__PURE__ */ e.createElement(c, { i18nKey: "PurchasedItem.optionbox.table.openOptionBox" }, "Open Option Box"))))));
    }, this.renderPagination = () => {
      const { optionboxLists: s } = this.logic.state;
      if (!s)
        return;
      const { paging: t } = s, o = !!(t != null && t.next), i = !!(t != null && t.previous), u = this.props.page;
      return /* @__PURE__ */ e.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ e.createElement(
        f,
        {
          next: o && `${p.PurchasedKeys.link}?page=${u + 1}`,
          prev: i && `${p.PurchasedKeys.link}?page=${u - 1}`
        }
      ));
    }, this.closeSuccessMessage = () => {
      this.setState({ showSuccessMessage: !1 });
    };
    const { page: a } = r, m = ((l = O.getAppState().getUser()) == null ? void 0 : l.userId) || null, n = N;
    this.state = {
      selectedOptionbox: null,
      showSuccessMessage: !1
    }, this.logic = new y({ page: a, userId: m, pageSize: n }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    var s, t;
    const { isFetching: r, optionboxLists: a, error: m } = this.logic.state, { selectedOptionbox: n, showSuccessMessage: l } = this.state;
    return /* @__PURE__ */ e.createElement("div", null, l && /* @__PURE__ */ e.createElement(x, { type: w.success, onDismiss: this.closeSuccessMessage, className: "mb-6" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "PurchasedItem.optionbox.successClaim" }, "Successfully claim the item")), r && /* @__PURE__ */ e.createElement(b, { className: "mt-6" }), !r && m && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(g, { error: m })), !r && !!((s = a == null ? void 0 : a.data) != null && s.length) && this.renderTableOrder(a), !r && !((t = a == null ? void 0 : a.data) != null && t.length) && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "MyGameList.productKey.notFound" }, "Not Found")), !r && a && this.renderPagination(), !!n && /* @__PURE__ */ e.createElement(
      h,
      {
        selectedOptionbox: n,
        onClose: (o) => this.closeOptionboxDialog(o)
      }
    ));
  }
}
const $ = E(P, (d, r) => d.page !== r.page);
export {
  $ as PurchasedOptionbox
};
