import { CommonError as g } from "./accelbyte-widgets124.mjs";
import { Loading as p } from "./accelbyte-widgets136.mjs";
import { Pagination as x } from "./accelbyte-widgets256.mjs";
import f from "./accelbyte-widgets210.mjs";
import { Ctx as y } from "./accelbyte-widgets33.mjs";
import { AccPath as h } from "./accelbyte-widgets34.mjs";
import { FeUtils as E } from "./accelbyte-widgets45.mjs";
import e from "react";
import { Trans as c } from "react-i18next";
import { ProductKeyDialog as b } from "./accelbyte-widgets578.mjs";
import { PurchasedKeysLogic as P } from "./accelbyte-widgets579.mjs";
const v = 10;
class w extends e.Component {
  constructor(s) {
    var n;
    super(s), this.openProductKeyDialog = (r) => {
      const { productKeyList: t } = this.logic.state, o = (t == null ? void 0 : t.data) && t.data[r];
      this.logic.setState({
        selectedProductKey: o
      }), this.setState({
        isProductKeyDialogOpen: !0
      });
    }, this.closeProductKeyDialog = () => {
      this.setState({ isProductKeyDialogOpen: !1 });
    }, this.renderTableOrder = (r) => /* @__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: "MyGameList.productKey.table.purchaseDate" }, "Purchase Date")), /* @__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: "MyGameList.productKey.table.name" }, "Name")))), (r == null ? void 0 : r.data) && r.data.map((t, o) => {
      const i = E.formatDate(t.grantedAt, {
        type: "dynamic",
        format: "LLLL"
      });
      return /* @__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: o }, /* @__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-shite text-sm md:w-1/2" }, /* @__PURE__ */ e.createElement("p", null, i)), /* @__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" }, t.name)), /* @__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.openProductKeyDialog(o) }, /* @__PURE__ */ e.createElement(c, { i18nKey: "MyGameList.productKey.table.showKey" }, "Show key"))));
    })), this.renderPagination = () => {
      const { productKeyList: r } = this.logic.state;
      if (!r)
        return;
      const { paging: t } = r, 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(
        x,
        {
          next: o && `${h.PurchasedKeys.link}?page=${u + 1}`,
          prev: i && `${h.PurchasedKeys.link}?page=${u - 1}`
        }
      ));
    };
    const { page: a } = s, m = ((n = y.getAppState().getUser()) == null ? void 0 : n.userId) || null, l = v;
    this.state = {
      isProductKeyDialogOpen: !1
    }, this.logic = new P({ page: a, userId: m, pageSize: l }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { isFetching: s, productKeyList: a, error: m, selectedProductKey: l, codeItems: n } = this.logic.state, { isProductKeyDialogOpen: r } = this.state;
    return /* @__PURE__ */ e.createElement("div", null, s && /* @__PURE__ */ e.createElement(p, { className: "mt-6" }), !s && m && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(g, { error: m })), !s && (a == null ? void 0 : a.data) && a.data.length > 0 && this.renderTableOrder(a), !s && (a == null ? void 0 : a.data) && a.data.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "MyGameList.productKey.notFound" }, "Not Found")), !s && a && this.renderPagination(), r && /* @__PURE__ */ e.createElement(b, { onClose: this.closeProductKeyDialog, selectedProductKey: l, codeItems: n }));
  }
}
const M = f(w, (d, s) => d.page !== s.page);
export {
  M as PurchasedKeys
};
