import { O as OverrideCSS, T as Trans, g as AccPath, a as Ctx, L as Loading, i as CommonError } from "./index.js";
import { c as classNames } from "./reactSlick.js";
import React__default from "react";
import { Link } from "react-router-dom";
import { g as getThirdPartyPlatformIcon } from "./PlatformIcon.js";
import { p as purchasedItemsListStyles, G as GameItem, N as NoGame } from "./PurchasedItemsList.js";
import "./dateFns.js";
import "./validator.js";
import "./reactPlayer.js";
import "./ItemHelper.js";
import "./Pagination.js";
import "./WithPropsGuard.js";
import "./default-item-image.js";
const accountOverviewPage = "accountOverviewPage _accountOverviewPage_97b73";
const loadingContainer = "loadingContainer _loadingContainer_99b59";
const errorContainer = "errorContainer _errorContainer_d15a0";
const myGamesContainer = "myGamesContainer _myGamesContainer_1ccba";
const linkedPlatformContainer = "linkedPlatformContainer _linkedPlatformContainer_9ee8a";
const subSection = "subSection _subSection_5df77";
const subSectionHeader = "subSectionHeader _subSectionHeader_59553";
const subSectionBody = "subSectionBody _subSectionBody_dcd88";
var styles$1 = {
  accountOverviewPage,
  loadingContainer,
  errorContainer,
  myGamesContainer,
  linkedPlatformContainer,
  subSection,
  subSectionHeader,
  subSectionBody
};
const AccountOverviewSubSection = ({ children, className }) => /* @__PURE__ */ React__default.createElement("div", {
  className: classNames(styles$1.subSection, className)
}, children);
const AccountOverviewSubSectionBody = ({ children, className }) => /* @__PURE__ */ React__default.createElement("div", {
  className: classNames(styles$1.subSectionBody, className)
}, children);
const AccountOverviewSubSectionHeader = ({ children, className }) => /* @__PURE__ */ React__default.createElement("div", {
  className: classNames(styles$1.subSectionHeader, className, OverrideCSS.TITLE_FONT)
}, children);
const linkedAccountsSubSection = "linkedAccountsSubSection _linkedAccountsSubSection_cd5a5";
const previewLinkedAccount = "previewLinkedAccount _previewLinkedAccount_0fb0f";
const noLinkedAccount = "noLinkedAccount _noLinkedAccount_fa3d9";
const linkedAccountsContainer = "linkedAccountsContainer _linkedAccountsContainer_c458e";
const platform = "platform _platform_7baf5";
var styles = {
  linkedAccountsSubSection,
  previewLinkedAccount,
  noLinkedAccount,
  linkedAccountsContainer,
  platform
};
const PreviewLinkedAccounts = (props) => {
  const { linkedPlatform } = props;
  return /* @__PURE__ */ React__default.createElement(AccountOverviewSubSection, {
    className: styles.linkedAccountsSubSection
  }, /* @__PURE__ */ React__default.createElement(AccountOverviewSubSectionHeader, null, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "AccountOverviewPage.subLinkedAccounts.title"
  }, "Linked Accounts"), /* @__PURE__ */ React__default.createElement(Link, {
    to: AccPath.LinkedAccounts.makePath()
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "AccountOverviewPage.subLinkedAccounts.seeAll"
  }, "See All"))), /* @__PURE__ */ React__default.createElement(AccountOverviewSubSectionBody, null, /* @__PURE__ */ React__default.createElement("div", {
    className: styles.previewLinkedAccount
  }, /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("tbody", null, linkedPlatform && linkedPlatform.length > 0 ? linkedPlatform.map((platform2) => renderListPlatform(platform2)) : /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", {
    colSpan: 3,
    className: styles.noLinkedAccount
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkedAccountPage.noLinkedAccount"
  }, "You have no linked account"))))))));
};
const renderListPlatform = (platform2) => {
  const platformName = platform2.platformName;
  if (!platformName)
    return null;
  return /* @__PURE__ */ React__default.createElement("tr", {
    key: platform2.platformName
  }, /* @__PURE__ */ React__default.createElement("td", {
    className: styles.linkedAccountsContainer
  }, /* @__PURE__ */ React__default.createElement("span", {
    className: styles.platform
  }, getThirdPartyPlatformIcon(platformName))));
};
const PreviewMyGames = (props) => {
  const { gameEntitlementsRecord, gameInfoRecord } = props;
  return /* @__PURE__ */ React__default.createElement(AccountOverviewSubSection, {
    className: purchasedItemsListStyles.myGamesSubSection
  }, /* @__PURE__ */ React__default.createElement(AccountOverviewSubSectionHeader, null, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "AccountOverviewPage.subSectionGames.title"
  }, "My Games"), /* @__PURE__ */ React__default.createElement(Link, {
    to: AccPath.PurchasedGame.makePath()
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "AccountOverviewPage.subSectionGames.seeAll"
  }, "See all"))), /* @__PURE__ */ React__default.createElement(AccountOverviewSubSectionBody, null, /* @__PURE__ */ React__default.createElement("div", {
    className: purchasedItemsListStyles.purchasedItemsListWrapper
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: purchasedItemsListStyles.myGameList
  }, gameEntitlementsRecord ? Object.keys(gameEntitlementsRecord).map((appId) => {
    const item = gameInfoRecord && gameInfoRecord[appId];
    return item ? /* @__PURE__ */ React__default.createElement(GameItem, {
      key: item == null ? void 0 : item.itemId,
      item
    }) : null;
  }) : /* @__PURE__ */ React__default.createElement(NoGame, null)))));
};
class AccountOverviewPage extends React__default.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null
    };
    this.gameManager = Ctx.getAppState().gameManager;
    this.gameManager.subscribe(() => this.setState({}));
    this.linkedAccountsManager = Ctx.getAppState().linkAccountManager;
    this.linkedAccountsManager.subscribe(() => this.setState({}));
  }
  async componentDidMount() {
    var _a;
    const userId = (_a = Ctx.getAppState().getUser()) == null ? void 0 : _a.userId;
    if (userId) {
      try {
        this.setState({ error: null });
        const [, gameEntitlements] = await Promise.all([
          this.linkedAccountsManager.getUserDistinctLinkedPlatform(userId),
          this.gameManager.fetchGameEntitlements(userId)
        ]);
        if (gameEntitlements) {
          const gameIds = gameEntitlements.map((entitlement) => entitlement.appId).filter(Boolean);
          await this.gameManager.fetchGamesInfo(gameIds);
        }
      } catch (error) {
        this.setState({ error });
      }
    }
  }
  render() {
    const { gameEntitlementsRecord, gameInfoRecord, isFetchingGameInfo, isFetchingGameEntitlements } = this.gameManager.state;
    const { linkedPlatform, isFetching: isFetchingLinkedPlatform } = this.linkedAccountsManager.state;
    const { error } = this.state;
    const isLoading = isFetchingGameEntitlements || isFetchingLinkedPlatform || isFetchingGameInfo;
    return /* @__PURE__ */ React__default.createElement("main", {
      className: classNames(styles$1.accountOverviewPage)
    }, isLoading ? /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.loadingContainer
    }, /* @__PURE__ */ React__default.createElement(Loading, null)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, error && /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.errorContainer
    }, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.myGamesContainer
    }, /* @__PURE__ */ React__default.createElement(PreviewMyGames, {
      gameEntitlementsRecord: gameEntitlementsRecord || null,
      gameInfoRecord: gameInfoRecord || null
    })), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.linkedPlatformContainer
    }, /* @__PURE__ */ React__default.createElement(PreviewLinkedAccounts, {
      linkedPlatform
    }))));
  }
}
export { AccountOverviewPage as default };
