import { FormGroup as l } from "./accelbyte-widgets263.mjs";
import { InputGroup as m } from "./accelbyte-widgets229.mjs";
import { t as d } from "./accelbyte-widgets58.mjs";
import * as e from "react";
import { Trans as t } from "react-i18next";
import { DisplayVerificationCodeError as f } from "./accelbyte-widgets372.mjs";
import i from "./accelbyte-widgets373.mjs";
import { validateAlphanumeric as p } from "./accelbyte-widgets293.mjs";
class A extends e.Component {
  constructor(n) {
    super(n), this.refreshComponent = () => this.setState({}), this.onVerificationCodeChange = (o) => {
      const { onChangeVerificationCode: c, validation: a } = this.props, r = o.target.value.toString().toUpperCase(), s = this.state.isPasteVerificationCode ? r.replace(/\s/g, "") : r;
      a.set("verificationCode", p(s)), c(s), this.setState({ isPasteVerificationCode: !1 });
    }, this.onPasteVerificationCode = () => {
      this.setState({ isPasteVerificationCode: !0 });
    }, this.state = {
      isPasteVerificationCode: !1
    };
  }
  componentDidMount() {
    this.props.validation.listen(this.refreshComponent);
  }
  componentWillUnmount() {
    this.props.validation.unlisten(this.refreshComponent);
  }
  render() {
    const { isRequestingVerificationCode: n, onRequestVerificationCode: o, verificationCode: c, onChangePage: a, validation: r } = this.props;
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(l, { className: i.formGroup }, /* @__PURE__ */ e.createElement("div", { className: i.label }, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.verificationCode" }, "Verification Code")), /* @__PURE__ */ e.createElement(
      m,
      {
        type: "text",
        value: c || "",
        className: i.input,
        placeholder: d("linkPlatformAccountPage.LinkNewAccount.placeholder.verificationCodePlaceholder"),
        onChange: this.onVerificationCodeChange,
        onPaste: this.onPasteVerificationCode
      }
    ), f(r.get("verificationCode")), /* @__PURE__ */ e.createElement("div", { className: i.resendCode }, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.didntReceiveEmail" }, "Didn't receive the email?"), " ", n && /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.requestingCode" }, "Requesting...")), !n && /* @__PURE__ */ e.createElement("span", { onClick: () => o && o() }, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.resend" }, "Click here to resend"))), /* @__PURE__ */ e.createElement("div", { className: i.resendCode }, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.enterWrongEmail" }, "Entered the wrong email? "), /* @__PURE__ */ e.createElement("span", { onClick: () => a && a() }, /* @__PURE__ */ e.createElement(t, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.clickToChange" }, "Click here to change")))));
  }
}
export {
  A as LinkNewAccountVerification
};
