import { LinkedAccountsErrorAlert as L } from "./accelbyte-widgets270.mjs";
import { Button as h } from "./accelbyte-widgets107.mjs";
import { TwitchIcon as f } from "./accelbyte-widgets509.mjs";
import { LoginPath as E } from "./accelbyte-widgets35.mjs";
import e from "react";
import { Trans as t } from "react-i18next";
import { Link as T } from "react-router-dom";
import "./accelbyte-widgets510.mjs";
import { TwitchCard as w } from "./accelbyte-widgets506.mjs";
import { TwitchDropLayout as y } from "./accelbyte-widgets507.mjs";
import { Ctx as d } from "./accelbyte-widgets33.mjs";
import { Typography as i } from "./accelbyte-widgets173.mjs";
import { UserInfoCard as P } from "./accelbyte-widgets511.mjs";
import N from "classnames";
const O = (a) => {
  const { user: n, avatarURL: m, isLoading: l, onLink: c, error: s, accountConflictInformation: g, logo: k, configs: r, isPreview: u, isMultipleGame: p } = a, o = d.getAppState();
  return /* @__PURE__ */ e.createElement(
    y,
    {
      backgroundOverlay: o.linkTwitchManager.getBackgroundOverlay(r),
      backgroundURL: o.linkTwitchManager.getBackgroundURL(r),
      logo: k || o.linkTwitchManager.getCompanyLogo(),
      className: N("linkFormPanel linkLayout", a.className),
      errorAlert: /* @__PURE__ */ e.createElement(L, { error: s, accountConflictInformation: g })
    },
    /* @__PURE__ */ e.createElement(w, { isMultipleGame: p }, /* @__PURE__ */ e.createElement(i, { tag: "h2" }, /* @__PURE__ */ e.createElement(t, { i18nKey: "LinkTwitchPage.linkFormPanel.title" }, "Link to Twitch")), /* @__PURE__ */ e.createElement(i, { tag: "p", className: "instructionMessage" }, /* @__PURE__ */ e.createElement(t, { i18nKey: "LinkTwitchPage.linkFormPanel.instruction" }, "To get the Drop items, please link your account with Twitch first")), /* @__PURE__ */ e.createElement(
      P,
      {
        withAvatar: !0,
        avatarURL: m,
        displayName: n.displayName,
        email: n.emailAddress,
        bottomCta: u ? /* @__PURE__ */ e.createElement(t, { i18nKey: "LinkTwitchPage.linkFormPanel.logout" }, "Not you? ", /* @__PURE__ */ e.createElement("a", { className: "btnLogout" }, "Logout")) : /* @__PURE__ */ e.createElement(t, { i18nKey: "LinkTwitchPage.linkFormPanel.logout" }, "Not you?", " ", /* @__PURE__ */ e.createElement(T, { to: E.Logout.makePath(), className: "btnLogout" }, "Logout"))
      }
    ), /* @__PURE__ */ e.createElement(h, { loadingIndicator: "SPINNER", onClick: c, isLoading: l, className: "btnTwitch" }, /* @__PURE__ */ e.createElement("div", { className: "btnItemContainer" }, /* @__PURE__ */ e.createElement(f, null), /* @__PURE__ */ e.createElement("span", { className: "btnText" }, /* @__PURE__ */ e.createElement(t, { i18nKey: "LinkTwitchPage.linkFormPanel.linkButton" }, "Link to Twitch")))))
  );
};
export {
  O as LinkFormPanel
};
