import { Button as d } from "./accelbyte-widgets107.mjs";
import { Dialog as g, DialogBody as p, DialogFooter as v } from "./accelbyte-widgets235.mjs";
import { LoadingBarIcon as E } from "./accelbyte-widgets342.mjs";
import { SuccessFlatIcon as u } from "./accelbyte-widgets542.mjs";
import { OverrideCSS as h } from "./accelbyte-widgets78.mjs";
import { Ctx as c } from "./accelbyte-widgets33.mjs";
import { Env as f } from "./accelbyte-widgets108.mjs";
import { suspendImageLoad as A } from "./accelbyte-widgets561.mjs";
import { UrlUtils as N } from "./accelbyte-widgets90.mjs";
import m from "classnames";
import { motion as D } from "framer-motion";
import { UrlHelper as S } from "@accelbyte/sdk";
import e from "react";
import { Trans as s } from "react-i18next";
import { RPMCreateButton as y } from "./accelbyte-widgets562.mjs";
import "./accelbyte-widgets563.mjs";
const I = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { delay: 0.1 } }
};
class H extends e.Component {
  constructor(a) {
    super(a), this.selectAvatar = () => {
      const { selectedImagePosition: t } = this.state;
      if (!t && t !== 0 || !this.state.avatarsList)
        return;
      const { avatarsList: r } = this.state, n = N.isValidUrl(r[t]) ? r[t] : S.combineURLPaths(window.location.origin, r[t]);
      this.props.onSelectedAvatar(n);
    }, this.state = {
      selectedImagePosition: null,
      avatarsList: []
    }, this.userManager = c.getUserManager();
  }
  async componentDidMount() {
    const a = c.getAppState().getDefaultAvatarsList();
    if (!a)
      throw new Error("No avatars are defined in the config server. Please add public links to the avatars to the config server.");
    this.setState({ avatarsList: a.split(`
`) });
  }
  render() {
    const { isUpdating: a } = this.userManager.state, { selectedImagePosition: t, avatarsList: r } = this.state, { showCreatorRPM: n } = this.props;
    return /* @__PURE__ */ e.createElement(g, { title: /* @__PURE__ */ e.createElement(s, { i18nKey: "SelectAvatarDialog.title" }, "Change avatar"), isOpen: !0, className: "selectAvatarDialog" }, /* @__PURE__ */ e.createElement(p, { className: "dialogBody" }, /* @__PURE__ */ e.createElement("div", { className: m("selectAvatarDialogSubTitle", h.BODY_FONT) }, /* @__PURE__ */ e.createElement(s, { i18nKey: "SelectAvatarDialog.subtitle" }, "Here are the some cool alternatives for your avatar:")), /* @__PURE__ */ e.createElement("div", { className: "selectAvatarDialogBody" }, /* @__PURE__ */ e.createElement(
      e.Suspense,
      {
        fallback: /* @__PURE__ */ e.createElement("div", { className: "imagesLoadingContainer" }, /* @__PURE__ */ e.createElement(E, null))
      },
      r.map((l, o) => /* @__PURE__ */ e.createElement(D.div, { variants: I, initial: "hidden", animate: "show", key: l }, /* @__PURE__ */ e.createElement(
        "div",
        {
          className: m("imageContainer", { selectedImage: o === t }),
          onClick: () => this.setState({ selectedImagePosition: o })
        },
        /* @__PURE__ */ e.createElement("div", { className: "avatarImage" }, /* @__PURE__ */ e.createElement(C, { src: l, alt: `Avatar option ${o + 1}` })),
        o === t && /* @__PURE__ */ e.createElement(u, { className: "selectedIcon" })
      )))
    )), f.READY_PLAYER_ME_AVATAR_URL && /* @__PURE__ */ e.createElement(y, { showCreatorRPM: n })), /* @__PURE__ */ e.createElement(v, { className: "dialogFooter" }, /* @__PURE__ */ e.createElement("button", { className: "btn btn-ghost btnClose", onClick: this.props.onCloseDialog }, /* @__PURE__ */ e.createElement(s, { i18nKey: "SelectAvatarDialog.closeButton" }, "Cancel")), /* @__PURE__ */ e.createElement(
      d,
      {
        loadingIndicator: "SPINNER",
        className: "btn btn-primary",
        onClick: this.selectAvatar,
        disabled: t === null,
        isLoading: a
      },
      /* @__PURE__ */ e.createElement(s, { i18nKey: "SelectAvatarDialog.saveButton" }, "SAVE")
    )));
  }
}
function C(i) {
  return A(i.src), /* @__PURE__ */ e.createElement("img", { ...i, loading: "lazy" });
}
export {
  H as SelectAvatarDialog
};
