import { Alert as f } from "./accelbyte-widgets123.mjs";
import { Button as m } from "./accelbyte-widgets107.mjs";
import { CommonError as h } from "./accelbyte-widgets124.mjs";
import { FormGroupError as p, FormGroup as u } from "./accelbyte-widgets263.mjs";
import { InputGroup as E } from "./accelbyte-widgets229.mjs";
import { getCurrentLanguage as C, t as g } from "./accelbyte-widgets58.mjs";
import { headerAlertsQueue as v } from "./accelbyte-widgets155.mjs";
import { Ctx as V } from "./accelbyte-widgets33.mjs";
import { VerificationCodeContext as y } from "./accelbyte-widgets139.mjs";
import { AlertType as c } from "./accelbyte-widgets128.mjs";
import e from "react";
import { Trans as t } from "react-i18next";
import P from "validator/lib/isEmpty.js";
import s from "./accelbyte-widgets158.mjs";
import { validateAlphanumeric as S, ValidateAlphaNumericErrorType as l } from "./accelbyte-widgets293.mjs";
import { Validation as N } from "./accelbyte-widgets269.mjs";
import { MAX_SHORT_TEXT_LENGTH as b } from "./accelbyte-widgets339.mjs";
class O extends e.Component {
  constructor(r) {
    super(r), this.notifyVerificationCodeSent = () => {
      this.setState({
        alert: {
          type: c.success,
          element: /* @__PURE__ */ e.createElement(t, { i18nKey: "ChangeEmailPage.verifyCodeForm.codeSent" }, "A verification code has been sent to your email")
        }
      });
    }, this.setErrorAlert = (i) => {
      this.setState({
        alert: {
          type: c.danger,
          element: /* @__PURE__ */ e.createElement(h, { error: i })
        }
      });
    }, this.handleNewAccountVerified = async () => {
      this.setState({ isVerificationSuccess: !0 }), v.push({
        type: c.success,
        element: /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.accountVerified" }, "Congratulations! The registration process is complete."),
        autoDismiss: !0
      }), await this.appState.refreshUser();
    }, this.verifyCode = async (i) => {
      try {
        await this.verificationManager.verify(i, C()), this.handleNewAccountVerified();
      } catch (a) {
        this.setErrorAlert(a);
      }
    }, this.logout = () => {
      this.appState.logout();
    }, this.onVerificationCodeChange = (i) => {
      const { isPasteVerificationCode: a } = this.state, o = i.target.value.toString().toUpperCase(), n = a ? o.replace(/\s/g, "") : o;
      this.validation.set("verificationCode", S(n)), this.setState({
        verificationCode: n,
        isPasteVerificationCode: !1
      });
    }, this.onPasteVerificationCode = () => {
      this.setState({
        isPasteVerificationCode: !0
      });
    }, this.sendVerificationCode = async () => {
      var a;
      const i = ((a = this.appState.getUser()) == null ? void 0 : a.emailAddress) || "";
      try {
        await this.verificationManager.sendVerificationCode(i, y.enum.UserAccountRegistration), this.notifyVerificationCodeSent();
      } catch {
        const { requestVerificationCodeError: n } = this.verificationManager.state;
        this.setErrorAlert(n);
      }
    }, this.state = {
      verificationCode: "",
      alert: null,
      isVerificationSuccess: !1,
      isPasteVerificationCode: !1
    }, this.validation = new N(), this.appState = V.getAppState(), this.validation.listen(() => this.setState({})), this.verificationManager = this.appState.verificationManager, this.verificationManager.subscribe(() => {
      this.setState({});
    });
  }
  renderVerificationCodeError(r) {
    if (!r)
      return null;
    const i = {
      [l.enum.empty]: /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.verifyCodeForm.verifyCodeError.empty" }, "Please enter your verification code."),
      [l.enum.exceedLengthLimit]: /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.verifyCodeForm.verifyCodeError.ExceedLimit" }, "Verification code must not exceed ", { MAX_SHORT_TEXT_LENGTH: b }, " characters"),
      [l.enum.invalidFormat]: /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.verifyCodeForm.verifyCodeError.invalidFormat" }, "The verification code must be alphanumeric and cannot contain spaces or special characters.")
    };
    return /* @__PURE__ */ e.createElement(p, null, i[r]);
  }
  render() {
    const { isRequestingVerificationCode: r, isVerifying: i } = this.verificationManager.state, { verificationCode: a, alert: o, isVerificationSuccess: n } = this.state, d = !this.validation.isAllValid() || P(a) || i || n;
    return /* @__PURE__ */ e.createElement("div", { className: "newEmailVerification" }, /* @__PURE__ */ e.createElement("div", { className: s.title }, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.title" }, "Enter the Verification Code")), !!o && /* @__PURE__ */ e.createElement(f, { className: "mb-6", type: o.type, onDismiss: () => this.setState({ alert: null }) }, o.element), /* @__PURE__ */ e.createElement("div", { className: s.description }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.instruction1" }, "A verification code has been sent to your email. Please verify your email address to complete the registration process.")), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.instruction2" }, "Please enter the verification code below:"))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(
      E,
      {
        className: s.input,
        value: a || "",
        placeholder: g("EmailVerificationPage.placeholder.verificationCode"),
        onChange: this.onVerificationCodeChange,
        onPaste: this.onPasteVerificationCode
      }
    ), this.renderVerificationCodeError(this.validation.get("verificationCode"))), /* @__PURE__ */ e.createElement("div", { className: s.description }, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.sendVerificationCode.didntReceiveEmail" }, "Didn't receive an email?"), r && /* @__PURE__ */ e.createElement("span", { className: "ml-1" }, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.sendVerificationCode.requesting" }, "Requesting..")), !r && /* @__PURE__ */ e.createElement("span", { onClick: this.sendVerificationCode }, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.sendVerificationCode.click" }, " Click here to resend"))), /* @__PURE__ */ e.createElement("div", { className: "flex flex-row" }, /* @__PURE__ */ e.createElement(
      m,
      {
        loadingIndicator: "SPINNER",
        disabled: d,
        className: "btn big btn-primary mt-6 uppercase",
        onClick: () => this.verifyCode(a),
        isLoading: i
      },
      /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.submitButton" }, "VERIFY")
    ), /* @__PURE__ */ e.createElement(m, { className: "btn big text-blue-40 mt-6 capitalize", onClick: this.logout, disabled: i || n }, /* @__PURE__ */ e.createElement(t, { i18nKey: "EmailVerificationPage.notNowBtn" }, "Not Now"))));
  }
}
export {
  O as NewAccountVerificationForm
};
