import { T as c, b6 as _, P as T, Q as g, f as E, U as v, g as y, L as f, t as N } from "./index-162fd1aa.mjs";
import t from "react";
import { Link as d } from "react-router-dom";
import { L as b, H as I } from "./LinkPlatformAccountPage-7c92cd14.mjs";
import { c as p } from "./reactSlick-cb4a2d39.mjs";
import { L as P } from "./LinkedAccountsErrorAlert-4afd92c0.mjs";
import "./dateFns-2367ee5b.mjs";
import "./validator-61879ab7.mjs";
import "./reactPlayer-2f69f369.mjs";
import "./Tabs-8498653e.mjs";
import "./CommonError-0ae83068.mjs";
import "./starBgGradient-589e5185.mjs";
import "./CommonError-4ed993c7.mjs";
import "./InputPassword-68c495c7.mjs";
import "./Checkbox-5e314906.mjs";
const F = "btnContainer _btnContainer_51af2", M = "btnLogout _btnLogout_b9842", u = {
  btnContainer: F,
  btnLogout: M
}, A = "twitchLinkedForm _twitchLinkedForm_11a12", C = "icon _icon_33120", S = "instructionMessage _instructionMessage_83142", U = "btnGoToInventory _btnGoToInventory_6a5a8", R = {
  twitchLinkedForm: A,
  icon: C,
  instructionMessage: S,
  btnGoToInventory: U
}, H = "twitchPageLayout _twitchPageLayout_40ab5", V = {
  twitchPageLayout: H
}, l = ({ children: i, className: e }) => /* @__PURE__ */ t.createElement("div", { className: p("formWrapper", e) }, i), q = (i) => {
  const { children: e, className: n } = i;
  return /* @__PURE__ */ t.createElement("div", { className: p(V.twitchPageLayout, n) }, /* @__PURE__ */ t.createElement(b, { className: "languageSelector" }), /* @__PURE__ */ t.createElement("div", { className: "headerLogoContainer" }, /* @__PURE__ */ t.createElement(I, null), e));
}, K = "https://www.twitch.tv/drops/inventory", G = () => /* @__PURE__ */ t.createElement(l, { className: R.twitchLinkedForm }, /* @__PURE__ */ t.createElement("h3", null, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkedForm.title" }, "Twitch Account Linked")), /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(_, { className: "icon", checked: !0, fill: !0 })), /* @__PURE__ */ t.createElement("p", { className: "instructionMessage" }, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkedForm.instruction" }, "Your account is now linked to Twitch. To claim your Drop items, please go to Twitch Inventory page.")), /* @__PURE__ */ t.createElement("a", { target: "_blank", rel: "noreferrer", href: K, className: "btn btn-primary btnGoToInventory" }, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkedForm.goToInventory" }, "Go To Twitch Inventory"))), x = ({ className: i }) => /* @__PURE__ */ t.createElement("i", { className: i }, /* @__PURE__ */ t.createElement("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement(
  "path",
  {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M1.125 0L0 2.875V14.625H4V16.75H6.25L8.375 14.625H11.625L16 10.25V0H1.125ZM14.5 9.5L12 12H8L5.875 14.125V12H2.5V1.5H14.5V9.5ZM12 4.375V8.75H10.5V4.375H12ZM8 4.375V8.75H6.5V4.375H8Z",
    fill: "white"
  }
))), D = "twitchFormContainer _twitchFormContainer_7c728", O = {
  twitchFormContainer: D
}, Z = (i) => {
  const { user: e, avatarURL: n, isLoading: a, onLink: o, error: r, accountConflictInformation: s } = i;
  return /* @__PURE__ */ t.createElement(l, { className: O.twitchFormContainer }, /* @__PURE__ */ t.createElement("h3", null, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkForm.title" }, "Link to Twitch")), /* @__PURE__ */ t.createElement(P, { error: r, accountConflictInformation: s }), /* @__PURE__ */ t.createElement("p", { className: "instructionMessage" }, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkForm.instruction" }, "To get the Drop items, please link your account with Twitch first")), /* @__PURE__ */ t.createElement("div", { className: "userInfoContainer" }, /* @__PURE__ */ t.createElement("div", { className: "profileImageContainer" }, /* @__PURE__ */ t.createElement(T, { imageLink: n, className: "profileImage" })), /* @__PURE__ */ t.createElement("div", { className: "displayNameAndEmail" }, /* @__PURE__ */ t.createElement("div", { className: "displayName" }, e.displayName), !!e.emailAddress && /* @__PURE__ */ t.createElement("div", { className: "email" }, e.emailAddress))), /* @__PURE__ */ t.createElement("div", { className: "mb-4" }, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkForm.logout" }, "Not you?", " ", /* @__PURE__ */ t.createElement(d, { to: g.Logout.makePath(), className: "btnLogout" }, "Logout"))), /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(E, { loadingIndicator: "SPINNER", onClick: o, isLoading: a, className: "btnTwitch" }, /* @__PURE__ */ t.createElement("div", { className: "btnItemContainer" }, /* @__PURE__ */ t.createElement(x, null), /* @__PURE__ */ t.createElement("span", { className: "btnText" }, /* @__PURE__ */ t.createElement(c, { i18nKey: "LinkTwitchPage.twitchLinkForm.linkButton" }, "Link to Twitch"))))));
};
class ct extends t.Component {
  constructor(e) {
    super(e), this.requestStatus = async () => {
      const n = this.getRequestId(), a = this.props.appState.getUser();
      if (n && a)
        try {
          await this.linkedAccountManager.requestStatus(n), this.props.appState.state.appHistory.replace(this.props.location.pathname);
        } catch (o) {
          console.error(o);
        }
    }, this.getRequestId = () => new URLSearchParams(location.search).get("requestId") || null, this.linkAccount = () => {
      const { location: n, appState: a } = this.props, o = v.getRedirectUrl(a.sdkOptions.redirectURI, n.pathname);
      this.linkTwitchManager.getTwitchURL(o, a.sdkOptions.clientId).then((r) => {
        r && (window.location.href = r);
      });
    }, this.linkTwitchManager = this.props.appState.linkTwitchManager, this.linkTwitchManager.subscribe(() => this.setState({})), this.linkedAccountManager = this.props.appState.linkAccountManager, this.linkedAccountManager.subscribe(() => this.setState({}));
  }
  async componentDidMount() {
    const e = this.props.appState.getUser();
    if (!e) {
      this.tryLogin();
      return;
    }
    if (this.props.location.search && this.requestStatus(), !this.linkTwitchManager.state.linkedTwitchAccount)
      try {
        if (await this.linkTwitchManager.fetchLinkedTwitchAccount(e.userId)) {
          if ((await this.linkTwitchManager.getTwitchPlatformToken(e.userId)).platform_token)
            return;
          this.linkAccount();
        }
      } catch (n) {
        console.error(n);
      }
  }
  tryLogin() {
    const e = this.props.appState.getSdk().IAM.UserAuthorization().createLoginURL(y.TwitchLinking.makePath());
    window.location.replace(e);
  }
  render() {
    const { linkedTwitchAccount: e, isFetchingToken: n, isFetchingLoginURL: a, isFetchingLinkedTwitchAccount: o } = this.linkTwitchManager.state, { isFetchingProfile: r, userProfile: s } = this.props.appState.userAppManager.state, { isLinking: w, error: L, accountConflictInformation: k } = this.linkedAccountManager.state, m = w || o || n || r, h = this.props.appState.getUser();
    return /* @__PURE__ */ t.createElement(q, null, m && /* @__PURE__ */ t.createElement(l, null, /* @__PURE__ */ t.createElement(f, null)), !m && !!h && /* @__PURE__ */ t.createElement(t.Fragment, null, e ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(G, null), /* @__PURE__ */ t.createElement("div", { className: u.btnContainer }, /* @__PURE__ */ t.createElement(d, { to: g.Logout.makePath(), className: u.btnLogout }, N("Navigation.links.logout")))) : /* @__PURE__ */ t.createElement(
      Z,
      {
        user: h,
        avatarURL: (s == null ? void 0 : s.avatarUrl) || "",
        onLink: this.linkAccount,
        isLoading: a,
        error: L,
        accountConflictInformation: k
      }
    )));
  }
}
export {
  ct as default
};
