import { T as Trans, b3 as CircleCheckIcon, b4 as ProfileImage, v as LoginPath, f as Button, U as UrlUtils, g as AccPath, L as Loading, t } from "./index.js";
import React__default from "react";
import { Link } from "react-router-dom";
import { L as LanguageSelector, H as HeaderLogoContainer } from "./LinkPlatformAccountPage.js";
import { c as classNames } from "./reactSlick.js";
import { L as LinkedAccountsErrorAlert } from "./LinkedAccountsErrorAlert.js";
import "./validator.js";
import "./dateFns.js";
import "./reactPlayer.js";
import "./Tabs.js";
import "./CommonError.js";
import "./starBgGradient.js";
import "./CommonError2.js";
import "./InputPassword.js";
import "./Checkbox.js";
const btnContainer = "btnContainer _btnContainer_204b5";
const btnLogout = "btnLogout _btnLogout_f5aa5";
var styles$3 = {
  btnContainer,
  btnLogout
};
const twitchLinkedForm = "twitchLinkedForm _twitchLinkedForm_2b7cc";
const icon = "icon _icon_675a2";
const instructionMessage = "instructionMessage _instructionMessage_ada55";
const btnGoToInventory = "btnGoToInventory _btnGoToInventory_94e8b";
var styles$2 = {
  twitchLinkedForm,
  icon,
  instructionMessage,
  btnGoToInventory
};
const twitchPageLayout = "twitchPageLayout _twitchPageLayout_b9cce";
var styles$1 = {
  twitchPageLayout
};
const TwitchFormContainer = ({ children, className }) => /* @__PURE__ */ React__default.createElement("div", {
  className: classNames("formWrapper", className)
}, children);
const TwitchPageLayout = (props) => {
  const { children, className } = props;
  return /* @__PURE__ */ React__default.createElement("div", {
    className: classNames(styles$1.twitchPageLayout, className)
  }, /* @__PURE__ */ React__default.createElement(LanguageSelector, {
    className: "languageSelector"
  }), /* @__PURE__ */ React__default.createElement("div", {
    className: "headerLogoContainer"
  }, /* @__PURE__ */ React__default.createElement(HeaderLogoContainer, null), children));
};
const TWITCH_DROP_INVENTORY_URL = "https://www.twitch.tv/drops/inventory";
const TwitchLinkedForm = () => {
  return /* @__PURE__ */ React__default.createElement(TwitchFormContainer, {
    className: styles$2.twitchLinkedForm
  }, /* @__PURE__ */ React__default.createElement("h3", null, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkedForm.title"
  }, "Twitch Account Linked")), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CircleCheckIcon, {
    className: "icon",
    checked: true,
    fill: true
  })), /* @__PURE__ */ React__default.createElement("p", {
    className: "instructionMessage"
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkedForm.instruction"
  }, "Your account is now linked to Twitch. To claim your Drop items, please go to Twitch Inventory page.")), /* @__PURE__ */ React__default.createElement("a", {
    target: "_blank",
    rel: "noreferrer",
    href: TWITCH_DROP_INVENTORY_URL,
    className: "btn btn-primary btnGoToInventory"
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkedForm.goToInventory"
  }, "Go To Twitch Inventory")));
};
const TwitchIcon = ({ className }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  width: "16",
  height: "17",
  viewBox: "0 0 16 17",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.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"
})));
const twitchFormContainer = "twitchFormContainer _twitchFormContainer_57ed0";
var styles = {
  twitchFormContainer
};
const TwitchLinkForm = (props) => {
  const { user, avatarURL, isLoading, onLink, error, accountConflictInformation } = props;
  return /* @__PURE__ */ React__default.createElement(TwitchFormContainer, {
    className: styles.twitchFormContainer
  }, /* @__PURE__ */ React__default.createElement("h3", null, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkForm.title"
  }, "Link to Twitch")), /* @__PURE__ */ React__default.createElement(LinkedAccountsErrorAlert, {
    error,
    accountConflictInformation
  }), /* @__PURE__ */ React__default.createElement("p", {
    className: "instructionMessage"
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkForm.instruction"
  }, "To get the Drop items, please link your account with Twitch first")), /* @__PURE__ */ React__default.createElement("div", {
    className: "userInfoContainer"
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: "profileImageContainer"
  }, /* @__PURE__ */ React__default.createElement(ProfileImage, {
    imageLink: avatarURL,
    className: "profileImage"
  })), /* @__PURE__ */ React__default.createElement("div", {
    className: "displayNameAndEmail"
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: "displayName"
  }, user.displayName), !!user.emailAddress && /* @__PURE__ */ React__default.createElement("div", {
    className: "email"
  }, user.emailAddress))), /* @__PURE__ */ React__default.createElement("div", {
    className: "mb-4"
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkForm.logout"
  }, "Not you?", " ", /* @__PURE__ */ React__default.createElement(Link, {
    to: LoginPath.Logout.makePath(),
    className: "btnLogout"
  }, "Logout"))), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Button, {
    loadingIndicator: "SPINNER",
    onClick: onLink,
    isLoading,
    className: "btnTwitch"
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: "btnItemContainer"
  }, /* @__PURE__ */ React__default.createElement(TwitchIcon, null), /* @__PURE__ */ React__default.createElement("span", {
    className: "btnText"
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "LinkTwitchPage.twitchLinkForm.linkButton"
  }, "Link to Twitch"))))));
};
class LinkTwitchPage extends React__default.Component {
  constructor(props) {
    super(props);
    this.requestStatus = async () => {
      const requestId = this.getRequestId();
      const user = this.props.appState.getUser();
      if (requestId && user) {
        try {
          await this.linkedAccountManager.requestStatus(requestId);
          this.props.appState.state.appHistory.replace(this.props.location.pathname);
        } catch (error) {
          console.error(error);
        }
      }
    };
    this.getRequestId = () => {
      const searchParams = new URLSearchParams(location.search);
      return searchParams.get("requestId") || null;
    };
    this.linkAccount = () => {
      const { location: location2, appState } = this.props;
      const redirectUri = UrlUtils.getRedirectUrl(appState.sdkOptions.redirectURI, location2.pathname);
      this.linkTwitchManager.getTwitchURL(redirectUri, appState.sdkOptions.clientId).then((url) => {
        if (url) {
          window.location.href = url;
        }
      });
    };
    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 user = this.props.appState.getUser();
    if (!user) {
      this.tryLogin();
      return;
    }
    if (this.props.location.search) {
      this.requestStatus();
    }
    if (!this.linkTwitchManager.state.linkedTwitchAccount) {
      try {
        const twitchAccount = await this.linkTwitchManager.fetchLinkedTwitchAccount(user.userId);
        if (twitchAccount) {
          const platformToken = await this.linkTwitchManager.getTwitchPlatformToken(user.userId);
          if (platformToken.platform_token)
            return;
          this.linkAccount();
        }
      } catch (error) {
        console.error(error);
      }
    }
  }
  tryLogin() {
    const loginURL = this.props.appState.getSdk().IAM.UserAuthorization().createLoginURL(AccPath.TwitchLinking.makePath());
    window.location.replace(loginURL);
  }
  render() {
    const { linkedTwitchAccount, isFetchingToken, isFetchingLoginURL, isFetchingLinkedTwitchAccount } = this.linkTwitchManager.state;
    const { isFetchingProfile, userProfile } = this.props.appState.userAppManager.state;
    const { isLinking, error, accountConflictInformation } = this.linkedAccountManager.state;
    const isLoading = isLinking || isFetchingLinkedTwitchAccount || isFetchingToken || isFetchingProfile;
    const user = this.props.appState.getUser();
    return /* @__PURE__ */ React__default.createElement(TwitchPageLayout, null, isLoading && /* @__PURE__ */ React__default.createElement(TwitchFormContainer, null, /* @__PURE__ */ React__default.createElement(Loading, null)), !isLoading && !!user && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !linkedTwitchAccount ? /* @__PURE__ */ React__default.createElement(TwitchLinkForm, {
      user,
      avatarURL: (userProfile == null ? void 0 : userProfile.avatarUrl) || "",
      onLink: this.linkAccount,
      isLoading: isFetchingLoginURL,
      error,
      accountConflictInformation
    }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TwitchLinkedForm, null), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$3.btnContainer
    }, /* @__PURE__ */ React__default.createElement(Link, {
      to: LoginPath.Logout.makePath(),
      className: styles$3.btnLogout
    }, t("Navigation.links.logout"))))));
  }
}
export { LinkTwitchPage as default };
