import { CommonError as f } from "./accelbyte-widgets124.mjs";
import { Dialog as P } from "./accelbyte-widgets235.mjs";
import { Loading as m } from "./accelbyte-widgets136.mjs";
import { ProfileImage as E } from "./accelbyte-widgets305.mjs";
import { Spinner as N, SpinnerStyle as v } from "./accelbyte-widgets154.mjs";
import { headerAlertsQueue as c } from "./accelbyte-widgets155.mjs";
import { Ctx as p } from "./accelbyte-widgets33.mjs";
import { Env as d } from "./accelbyte-widgets108.mjs";
import { AlertType as g } from "./accelbyte-widgets128.mjs";
import D from "classnames";
import e from "react";
import { Trans as s } from "react-i18next";
import { ReadyPlayerMeDialog as y } from "./accelbyte-widgets441.mjs";
import { SelectAvatarDialog as A } from "./accelbyte-widgets442.mjs";
import { mockUser as h } from "./accelbyte-widgets209.mjs";
import S from "./accelbyte-widgets443.mjs";
import { EligibleUser as u } from "@accelbyte/sdk-iam";
import { FeatureFlags as w } from "./accelbyte-widgets57.mjs";
class j extends e.Component {
  constructor(r) {
    super(r), this.onProfileAvatarUpdated = () => {
      c.push({
        type: g.success,
        element: /* @__PURE__ */ e.createElement(s, { i18nKey: "AccountProfilePreview.updateProfileAvatarSuccess" }, "Awesome! Your avatar has been updated."),
        autoDismiss: !0
      });
    }, this.onProfileAvatarUpdateError = () => {
      c.push({
        type: g.danger,
        element: /* @__PURE__ */ e.createElement(s, { i18nKey: "AccountProfilePreview.updateProfileAvatarError" }, "Sorry, we are unable to process this request"),
        autoDismiss: !0
      });
    }, this.isUsernameDisabled = () => d.IS_DISABLE_USERNAME, this.isDisplayNameDisabled = () => d.IS_DISABLE_DISPLAY_NAME, this.getNameFallback = () => {
      const a = this.appState.getUser();
      return u.safeParse(a).success ? this.isUsernameDisabled() ? (a == null ? void 0 : a.displayName) || (a == null ? void 0 : a.userName) : (a == null ? void 0 : a.userName) || (a == null ? void 0 : a.displayName) : null;
    }, this.updateUserPicture = async (a) => {
      await this.setState({ showChangePictureDialog: !1 });
      try {
        await this.userManager.uploadUserProfileImage(a), this.onProfileAvatarUpdated();
      } catch {
        this.onProfileAvatarUpdateError();
      } finally {
        this.setState({ isLoadingDialogOpen: !1 });
      }
    }, this.appState = p.getAppState(), this.userManager = this.appState.userAppManager, this.state = {
      showChangePictureDialog: !1,
      showCreatorAvatarDialog: !1,
      isLoadingDialogOpen: !1
    };
  }
  renderUserProfile() {
    const { isPreviewMode: r } = this.props, { userProfile: a } = this.userManager.state, t = r ? h : this.appState.getUser(), { isUpdating: i } = this.userManager.state;
    if (!u.safeParse(t).success)
      return null;
    const l = (t == null ? void 0 : t.userName) && t.displayName, n = r ? h.displayName : this.getNameFallback();
    return /* @__PURE__ */ e.createElement("div", { className: "userProfile" }, p.hasFeature(w.isAvatarVisible) && /* @__PURE__ */ e.createElement("div", { className: "displayPicture" }, i && /* @__PURE__ */ e.createElement(m, { className: "loading" }), !i && /* @__PURE__ */ e.createElement("div", { className: "imageContainer" }, /* @__PURE__ */ e.createElement(E, { imageLink: a && a.avatarUrl || "" }), /* @__PURE__ */ e.createElement(
      "button",
      {
        className: "changeButton",
        onClick: r ? () => null : () => this.setState({ showChangePictureDialog: !0 })
      },
      /* @__PURE__ */ e.createElement(s, { i18nKey: "UserProfilePreview.button.change" }, "Change")
    ))), /* @__PURE__ */ e.createElement("div", { className: "userInfo" }, /* @__PURE__ */ e.createElement("h3", { className: "displayName" }, n), /* @__PURE__ */ e.createElement("div", { className: "emailAndLocation" }, l && !this.isUsernameDisabled() && !this.isDisplayNameDisabled() && /* @__PURE__ */ e.createElement("span", { className: "profileName" }, t.displayName), " ", t == null ? void 0 : t.emailAddress, " · ", t == null ? void 0 : t.country), /* @__PURE__ */ e.createElement("div", { className: "userId" }, "ID: ", t == null ? void 0 : t.userId)));
  }
  renderLoadingDialog() {
    return /* @__PURE__ */ e.createElement(P, { isOpen: !0, className: "loadingSpinnerContainer" }, /* @__PURE__ */ e.createElement("p", { className: "text-lg font-medium" }, /* @__PURE__ */ e.createElement(s, { i18nKey: "RPMCreator.loadingRenderImage.title" }, "Saving your avatar...")), /* @__PURE__ */ e.createElement(N, { className: D(v.blue, "my-12") }), /* @__PURE__ */ e.createElement("p", { className: "text-sm" }, /* @__PURE__ */ e.createElement(s, { i18nKey: "RPMCreator.loadingRenderImage.info" }, "You will be redirected in a few seconds. If nothing happened, please refresh this page.")));
  }
  render() {
    const { isFetchingProfile: r, errorFetchingProfile: a } = this.userManager.state, { showChangePictureDialog: t, showCreatorAvatarDialog: i, isLoadingDialogOpen: l } = this.state, { isPreviewMode: n } = this.props, o = n ? !1 : r;
    return /* @__PURE__ */ e.createElement("div", { className: S.userProfilePreview }, o && /* @__PURE__ */ e.createElement(m, null), !o && t && /* @__PURE__ */ e.createElement(
      A,
      {
        onCloseDialog: () => this.setState({ showChangePictureDialog: !1 }),
        onSelectedAvatar: this.updateUserPicture,
        showCreatorRPM: () => this.setState({ showCreatorAvatarDialog: !0 })
      }
    ), !o && !a && this.renderUserProfile(), !o && a && /* @__PURE__ */ e.createElement("div", { className: "errorContainer" }, /* @__PURE__ */ e.createElement(f, { error: a })), i && /* @__PURE__ */ e.createElement(
      y,
      {
        onCloseDialog: () => this.setState({ showCreatorAvatarDialog: !1 }),
        updateAvatar: this.updateUserPicture,
        setLoadingDialogOpen: () => this.setState({ isLoadingDialogOpen: !0 })
      }
    ), l && this.renderLoadingDialog());
  }
}
export {
  j as default
};
