import { useState, createElement, Fragment, useMemo } from "react";
import { DisableOtpForm } from "./DisableOtpForm.js";
import { Button } from "@contember/ui";
import { PrepareOtpForm } from "./PrepareOtpForm.js";
import { ConfirmOtpForm } from "./ConfirmOtpForm.js";
import qrcode from "qrcode-generator";
import { useIdentity } from "../../../components/Identity/useIdentity.js";
const OtpManagement = () => {
  const identity = useIdentity();
  const [initializingOtp, setInitializingOtp] = useState(false);
  const [otpUri, setOtpUri] = useState();
  if (initializingOtp) {
    return /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(PrepareOtpForm, {
      onPrepared: ({ otpUri: otpUri2 }) => {
        setInitializingOtp(false);
        setOtpUri(otpUri2);
      },
      isReSetup: identity.otpEnabled,
      onCancel: () => setInitializingOtp(false)
    }));
  }
  if (otpUri) {
    return /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement("p", null, "Now scan the following QR code in you application:"), /* @__PURE__ */ createElement(QrCode, {
      data: otpUri
    }), /* @__PURE__ */ createElement("p", null, "After registering to you application, write down a code from the application."), /* @__PURE__ */ createElement(ConfirmOtpForm, {
      onSuccess: () => {
        setOtpUri(void 0);
      }
    }));
  }
  if (identity.otpEnabled) {
    return /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement("p", null, "Two factor authentication is ENABLED."), /* @__PURE__ */ createElement(DisableOtpForm, null), /* @__PURE__ */ createElement("p", null, "You already have two-factor authentication active. By enabling a new code, the old one will no longer work."), /* @__PURE__ */ createElement(Button, {
      onClick: () => setInitializingOtp(true)
    }, "Setup again"));
  }
  return /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement("p", null, "2-Step Verification provides stronger security for your account by requiring a second step of verification when you sign in. In addition to your password, you\u2019ll also need a code generated by an application on your phone."), /* @__PURE__ */ createElement(Button, {
    onClick: () => setInitializingOtp(true)
  }, "Setup two-factor authentication"));
};
const QrCode = ({ data }) => {
  const code = useMemo(() => {
    const qr = qrcode(0, "L");
    qr.addData(data);
    qr.make();
    return qr.createDataURL(4);
  }, [data]);
  return /* @__PURE__ */ createElement("img", {
    src: code
  });
};
export { OtpManagement };
//# sourceMappingURL=OtpManagement.js.map
