import * as e from "react";
import { Trans as r } from "react-i18next";
import { t as u } from "./accelbyte-widgets58.mjs";
import h from "react-otp-input";
import { Alert as g } from "./accelbyte-widgets123.mjs";
import { Button as y } from "./accelbyte-widgets107.mjs";
import { CommonError as f } from "./accelbyte-widgets124.mjs";
import { AlertType as l } from "./accelbyte-widgets128.mjs";
import { Ctx as S } from "./accelbyte-widgets33.mjs";
import c from "./accelbyte-widgets182.mjs";
import { ONE_TIME_CODE_LENGTH as p } from "./accelbyte-widgets353.mjs";
import { Iam as C } from "@accelbyte/sdk-iam";
class F extends e.Component {
  constructor(n) {
    super(n), this.onCodeChange = (t) => {
      this.setState({ code: t });
    }, this.dismissAlert = () => {
      this.setState({ alert: null });
    }, this.getDisplayedAlert = (t, i) => i ? /* @__PURE__ */ e.createElement(r, { i18nKey: "LinkAccountWithOneTimeCodePage.oneTimeCodeForm.error.expired" }, "Sorry, the code you entered has expired. Please try again.") : t ? /* @__PURE__ */ e.createElement(r, { i18nKey: "LinkAccountWithOneTimeCodePage.oneTimeCodeForm.error.invalid" }, "Sorry, the code you entered is invalid. Please try again.") : null, this.onSubmit = async () => {
      const t = C.OAuth20ExtensionApi(this.appState.getSdk()), { isSubmitting: i, code: s } = this.state;
      try {
        if (i)
          return;
        this.setState({ isSubmitting: !0 });
        const o = await t.postLinkCodeValidate({ oneTimeLinkCode: s }), { valid: d, expired: a } = o, m = !d;
        if (m || a) {
          this.setState({
            isSubmitting: !1,
            alert: {
              type: l.danger,
              element: this.getDisplayedAlert(m, a)
            }
          });
          return;
        }
        this.props.onContinue(this.state.code);
      } catch (o) {
        console.error(o), this.setState({
          isSubmitting: !1,
          alert: {
            type: l.danger,
            element: /* @__PURE__ */ e.createElement(f, { error: o })
          }
        });
      }
    }, this.state = {
      code: "",
      isSubmitting: !1,
      alert: null
    }, this.appState = S.getAppState();
  }
  render() {
    const { code: n, isSubmitting: t, alert: i } = this.state, s = this.appState.getBrandName();
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement("p", { className: c.title }, /* @__PURE__ */ e.createElement(r, { i18nKey: "LinkAccountWithOneTimeCodePage.title" }, "Link to an ", { publisherName: s }, " Account")), /* @__PURE__ */ e.createElement("p", { className: c.description }, /* @__PURE__ */ e.createElement(r, { i18nKey: "LinkAccountWithOneTimeCodePage.oneTimeCodeForm.desc" }, "Enter the code on your device to continue.")), !!i && /* @__PURE__ */ e.createElement(g, { type: i.type, onDismiss: this.dismissAlert, className: "mt-5 text-left" }, i.element)), /* @__PURE__ */ e.createElement(
      h,
      {
        value: n,
        onChange: this.onCodeChange,
        numInputs: p,
        className: "otpInput",
        containerStyle: "otpInputContainer my-5",
        focusStyle: "otpInput__focus",
        shouldAutoFocus: !0,
        isDisabled: t
      }
    ), /* @__PURE__ */ e.createElement(
      y,
      {
        loadingIndicator: "SPINNER",
        className: "btn btn-primary w-full py-2 px-0",
        onClick: this.onSubmit,
        disabled: n.length < p,
        isLoading: t
      },
      u("common.continue")
    ));
  }
}
export {
  F as OneTimeCodeForm
};
