import { useCallback, createElement, Fragment } from "react";
import { useShowToast, Stack, FieldContainer, TextInput, Message, Button } from "@contember/ui";
import { usePrepareOtp } from "../../mutations/otp/prepareOtp.js";
import { useForm } from "../../lib/useForm.js";
const initialValues = {
  label: "Contember Admin"
};
const PrepareOtpForm = ({ onPrepared, isReSetup, onCancel }) => {
  const addToast = useShowToast();
  const prepareOtp = usePrepareOtp();
  const { isSubmitting, onSubmit, register } = useForm(initialValues, useCallback(async (values) => {
    const response = await prepareOtp({ label: values.label });
    if (response.ok) {
      onPrepared(response.result);
    } else {
      switch (response.error.code) {
        case "OTP_NOT_ACTIVE":
          return addToast({ message: `Two factor is not active`, type: "error", dismiss: true });
      }
    }
  }, [addToast, prepareOtp, onPrepared]));
  return /* @__PURE__ */ createElement("form", {
    onSubmit
  }, /* @__PURE__ */ createElement(Stack, {
    direction: "vertical",
    gap: "large"
  }, /* @__PURE__ */ createElement(FieldContainer, {
    label: "Label for an identification in two-factor app"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("label")
  })), isReSetup && /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(Message, {
    distinction: "striking",
    intent: "warn"
  }, 'You already have two-factor authentication active. By clicking "Continue", the old one will no longer work.')), /* @__PURE__ */ createElement(Stack, {
    direction: "horizontal",
    style: { alignSelf: "flex-end" }
  }, /* @__PURE__ */ createElement(Button, {
    type: "submit",
    distinction: "seamless",
    onClick: onCancel
  }, "Cancel"), /* @__PURE__ */ createElement(Button, {
    intent: isReSetup ? "danger" : "primary",
    distinction: "primary",
    type: "submit",
    disabled: isSubmitting
  }, "Continue"))));
};
export { PrepareOtpForm };
//# sourceMappingURL=PrepareOtpForm.js.map
