import { Button as c } from "./accelbyte-widgets107.mjs";
import { Checkbox as m } from "./accelbyte-widgets335.mjs";
import { t as i } from "./accelbyte-widgets58.mjs";
import t from "react";
import { Trans as h } from "react-i18next";
import p from "react-otp-input";
class v extends t.Component {
  constructor(n) {
    super(n), this.onCodeChange = (e) => {
      this.setState({ code: e });
    }, this.onRememberDeviceChange = () => {
      this.setState((e) => ({
        rememberDevice: !e.rememberDevice
      }));
    }, this.submit = () => {
      const { factor: e } = this.props, { code: o, rememberDevice: r } = this.state;
      this.props.onSubmit({ code: o, factor: e, rememberDevice: r });
    }, this.onKeyDown = (e) => {
      e.key !== "Enter" || this.state.code.length < this.props.codeLength || this.submit();
    }, this.state = {
      code: "",
      rememberDevice: !0
    };
  }
  componentDidMount() {
    window.addEventListener("keydown", this.onKeyDown);
  }
  componentWillUnmount() {
    window.removeEventListener("keydown", this.onKeyDown);
  }
  render() {
    const { codeLength: n, isSubmitting: e, onTryAnother: o, helperText: r } = this.props, { code: s, rememberDevice: a } = this.state;
    return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
      p,
      {
        value: s,
        onChange: this.onCodeChange,
        numInputs: n,
        className: "otpInput",
        containerStyle: "otpInputContainer",
        focusStyle: "otpInput__focus",
        shouldAutoFocus: !0,
        isDisabled: e
      }
    ), r, /* @__PURE__ */ t.createElement("div", { className: "rememberDeviceContainer" }, /* @__PURE__ */ t.createElement(m, { isChecked: a, onChange: this.onRememberDeviceChange, label: i("twoFAPage.checkbox.rememberDevice") }), !!o && /* @__PURE__ */ t.createElement("span", { className: "tryAnother", onClick: o }, /* @__PURE__ */ t.createElement(h, { i18nKey: "twoFAPage.tryAnother" }, "Try another way"))), /* @__PURE__ */ t.createElement(
      c,
      {
        loadingIndicator: "SPINNER",
        className: "continueButton btn btn-primary",
        onClick: this.submit,
        disabled: s.length < n,
        isLoading: e
      },
      i("UpgradeHeadlessAccountPage.UpgradeHeadlessAccountPage.continue")
    ));
  }
}
export {
  v as CodeInput
};
