import { localizationKeys } from "../../localization/localizationKeys.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
import { Button, Col, Flex, Text } from "../../customizables/index.js";
import { QRCode } from "../../common/QRCode.js";
import { handleError } from "../../utils/errorHandler.js";
import { FormButtonContainer } from "../../elements/FormButtons.js";
import { FormContainer } from "../../elements/FormContainer.js";
import { useActionContext } from "../../elements/Action/ActionRoot.js";
import { ClipboardInput } from "../../elements/ClipboardInput.js";
import { FullHeightLoader } from "../../elements/FullHeightLoader.js";
import React from "react";
import { useReverification, useUser } from "@clerk/shared/react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
import { isClerkRuntimeError } from "@clerk/shared/error";

//#region src/components/UserProfile/AddAuthenticatorApp.tsx
const AddAuthenticatorApp = withCardStateProvider((props) => {
	const { title, onSuccess, onReset } = props;
	const { user } = useUser();
	const card = useCardState();
	const createTOTP = useReverification(() => user?.createTOTP());
	const { close } = useActionContext();
	const [totp, setTOTP] = React.useState(void 0);
	const [displayFormat, setDisplayFormat] = React.useState("qr");
	React.useEffect(() => {
		if (!user) return;
		createTOTP().then((totp$1) => setTOTP(totp$1)).catch((err) => {
			if (isClerkRuntimeError(err) && err.code === "reverification_cancelled") return close();
			return handleError(err, [], card.setError);
		});
	}, []);
	if (card.error) return /* @__PURE__ */ jsx(FormContainer, { headerTitle: title });
	return /* @__PURE__ */ jsxs(FormContainer, {
		headerTitle: title,
		headerSubtitle: displayFormat == "qr" ? localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.infoText__ableToScan") : localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.infoText__unableToScan"),
		children: [!totp && /* @__PURE__ */ jsx(FullHeightLoader, {}), totp && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Col, {
			gap: 4,
			children: [displayFormat == "qr" && /* @__PURE__ */ jsx(QRCode, {
				justify: "center",
				url: totp.uri || ""
			}), displayFormat == "uri" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
				/* @__PURE__ */ jsx(Text, {
					colorScheme: "secondary",
					localizationKey: localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan1")
				}),
				/* @__PURE__ */ jsx(ClipboardInput, { value: totp.secret }),
				/* @__PURE__ */ jsx(Text, {
					colorScheme: "secondary",
					localizationKey: localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan2")
				}),
				/* @__PURE__ */ jsx(ClipboardInput, { value: totp.uri })
			] })]
		}), /* @__PURE__ */ jsxs(Flex, {
			justify: "between",
			align: "center",
			sx: { width: "100%" },
			children: [
				displayFormat == "qr" && /* @__PURE__ */ jsx(Button, {
					variant: "link",
					textVariant: "buttonLarge",
					onClick: () => setDisplayFormat("uri"),
					localizationKey: localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.buttonUnableToScan__nonPrimary")
				}),
				displayFormat == "uri" && /* @__PURE__ */ jsx(Button, {
					variant: "link",
					textVariant: "buttonLarge",
					onClick: () => setDisplayFormat("qr"),
					localizationKey: localizationKeys("userProfile.mfaTOTPPage.authenticatorApp.buttonAbleToScan__nonPrimary")
				}),
				/* @__PURE__ */ jsxs(FormButtonContainer, { children: [/* @__PURE__ */ jsx(Button, {
					onClick: onSuccess,
					localizationKey: localizationKeys("userProfile.formButtonPrimary__continue"),
					elementDescriptor: descriptors.formButtonPrimary
				}), /* @__PURE__ */ jsx(Button, {
					variant: "ghost",
					onClick: onReset,
					localizationKey: localizationKeys("userProfile.formButtonReset"),
					elementDescriptor: descriptors.formButtonReset
				})] })
			]
		})] })]
	});
});

//#endregion
export { AddAuthenticatorApp };
//# sourceMappingURL=AddAuthenticatorApp.js.map