import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import auth_app_default from "../../icons/auth-app.js";
import dot_circle_horizontal_default from "../../icons/dot-circle-horizontal.js";
import mobile_small_default from "../../icons/mobile-small.js";
import { useCardState } from "../../elements/contexts/index.js";
import { Badge, Flex, Icon, Text } from "../../customizables/index.js";
import { handleError } from "../../utils/errorHandler.js";
import { useActionContext } from "../../elements/Action/ActionRoot.js";
import { Action } from "../../elements/Action/index.js";
import { ThreeDotsMenu } from "../../elements/ThreeDotsMenu.js";
import { ProfileSection } from "../../elements/Section.js";
import { defaultFirst, getSecondFactors, getSecondFactorsAvailableToAdd } from "./utils.js";
import { FormattedPhoneNumberText } from "../../elements/FormattedPhoneNumber.js";
import { MfaBackupCodeCreateScreen, MfaScreen, RemoveMfaPhoneCodeScreen, RemoveMfaTOTPScreen } from "./MfaScreens.js";
import React, { Fragment, useState } from "react";
import { useUser } from "@clerk/shared/react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/UserProfile/MfaSection.tsx
const MfaSection = () => {
	const { userSettings: { attributes } } = useEnvironment();
	const { user } = useUser();
	const [actionValue, setActionValue] = useState(null);
	if (!user) return null;
	const secondFactors = getSecondFactors(attributes);
	const secondFactorsAvailableToAdd = getSecondFactorsAvailableToAdd(attributes, user);
	const showTOTP = secondFactors.includes("totp") && user.totpEnabled;
	const showBackupCode = secondFactors.includes("backup_code") && user.backupCodeEnabled;
	const mfaPhones = user.phoneNumbers.filter((ph) => ph.verification.status === "verified").filter((ph) => ph.reservedForSecondFactor).sort(defaultFirst);
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("userProfile.start.mfaSection.title"),
		centered: false,
		id: "mfa",
		children: /* @__PURE__ */ jsx(Action.Root, {
			value: actionValue,
			onChange: setActionValue,
			children: /* @__PURE__ */ jsxs(ProfileSection.ItemList, {
				id: "mfa",
				children: [
					showTOTP && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ProfileSection.Item, {
						id: "mfa",
						hoverable: true,
						children: [/* @__PURE__ */ jsxs(Flex, {
							sx: (t) => ({
								gap: t.space.$2,
								alignItems: "center"
							}),
							children: [
								/* @__PURE__ */ jsx(Icon, {
									icon: auth_app_default,
									sx: (theme) => ({ color: theme.colors.$neutralAlpha700 })
								}),
								/* @__PURE__ */ jsx(Text, { localizationKey: localizationKeys("userProfile.start.mfaSection.totp.headerTitle") }),
								/* @__PURE__ */ jsx(Badge, { localizationKey: localizationKeys("badge__default") })
							]
						}), /* @__PURE__ */ jsx(MfaTOTPMenu, {})]
					}), /* @__PURE__ */ jsx(Action.Open, {
						value: "remove-totp",
						children: /* @__PURE__ */ jsx(Action.Card, {
							variant: "destructive",
							children: /* @__PURE__ */ jsx(RemoveMfaTOTPScreen, {})
						})
					})] }),
					secondFactors.includes("phone_code") && mfaPhones.map((phone) => {
						const isDefault = !showTOTP && phone.defaultSecondFactor;
						const phoneId = phone.id;
						return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ProfileSection.Item, {
							id: "mfa",
							hoverable: true,
							children: [/* @__PURE__ */ jsxs(Flex, {
								sx: (t) => ({
									gap: t.space.$2,
									alignItems: "center"
								}),
								children: [
									/* @__PURE__ */ jsx(Icon, {
										icon: mobile_small_default,
										sx: (theme) => ({ color: theme.colors.$neutralAlpha700 })
									}),
									/* @__PURE__ */ jsxs(Text, { children: ["SMS Code ", /* @__PURE__ */ jsx(FormattedPhoneNumberText, { value: phone.phoneNumber })] }),
									isDefault && /* @__PURE__ */ jsx(Badge, { localizationKey: localizationKeys("badge__default") })
								]
							}), /* @__PURE__ */ jsx(MfaPhoneCodeMenu, {
								phone,
								showTOTP
							})]
						}), /* @__PURE__ */ jsx(Action.Open, {
							value: `remove-${phoneId}`,
							children: /* @__PURE__ */ jsx(Action.Card, {
								variant: "destructive",
								children: /* @__PURE__ */ jsx(RemoveMfaPhoneCodeScreen, { phoneId })
							})
						})] }, phoneId);
					}),
					showBackupCode && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ProfileSection.Item, {
						id: "mfa",
						hoverable: true,
						children: [/* @__PURE__ */ jsxs(Flex, {
							sx: (t) => ({
								gap: t.space.$2,
								alignItems: "center"
							}),
							children: [/* @__PURE__ */ jsx(Icon, {
								icon: dot_circle_horizontal_default,
								sx: (theme) => ({ color: theme.colors.$neutralAlpha700 })
							}), /* @__PURE__ */ jsx(Text, { localizationKey: localizationKeys("userProfile.start.mfaSection.backupCodes.headerTitle") })]
						}), /* @__PURE__ */ jsx(MfaBackupCodeMenu, {})]
					}), /* @__PURE__ */ jsx(Action.Open, {
						value: "regenerate",
						children: /* @__PURE__ */ jsx(Action.Card, { children: /* @__PURE__ */ jsx(MfaBackupCodeCreateScreen, {}) })
					})] }),
					/* @__PURE__ */ jsx(MfaAddMenu, {
						secondFactorsAvailableToAdd,
						onClick: () => setActionValue(null)
					})
				]
			})
		})
	});
};
const MfaPhoneCodeMenu = ({ phone, showTOTP }) => {
	const { open } = useActionContext();
	const card = useCardState();
	const phoneId = phone.id;
	return /* @__PURE__ */ jsx(ThreeDotsMenu, { actions: [!showTOTP && !phone.defaultSecondFactor ? {
		label: localizationKeys("userProfile.start.mfaSection.phoneCode.actionLabel__setDefault"),
		onClick: () => phone.makeDefaultSecondFactor().catch((err) => handleError(err, [], card.setError))
	} : null, {
		label: localizationKeys("userProfile.start.mfaSection.phoneCode.destructiveActionLabel"),
		isDestructive: true,
		onClick: () => open(`remove-${phoneId}`)
	}].filter((a) => a !== null) });
};
const MfaBackupCodeMenu = () => {
	const { open } = useActionContext();
	return /* @__PURE__ */ jsx(ThreeDotsMenu, { actions: [{
		label: localizationKeys("userProfile.start.mfaSection.backupCodes.actionLabel__regenerate"),
		onClick: () => open("regenerate")
	}].filter((a) => a !== null) });
};
const MfaTOTPMenu = () => {
	const { open } = useActionContext();
	return /* @__PURE__ */ jsx(ThreeDotsMenu, { actions: [{
		label: localizationKeys("userProfile.start.mfaSection.totp.destructiveActionTitle"),
		isDestructive: true,
		onClick: () => open("remove-totp")
	}].filter((a) => a !== null) });
};
const MfaAddMenu = (props) => {
	const { open } = useActionContext();
	const { secondFactorsAvailableToAdd, onClick } = props;
	const [selectedStrategy, setSelectedStrategy] = useState();
	const strategies = React.useMemo(() => secondFactorsAvailableToAdd.map((key) => {
		if (key === "phone_code") return {
			icon: mobile_small_default,
			text: "SMS code",
			key: "phone_code"
		};
		else if (key === "totp") return {
			icon: auth_app_default,
			text: "Authenticator application",
			key: "totp"
		};
		else if (key === "backup_code") return {
			icon: dot_circle_horizontal_default,
			text: "Backup code",
			key: "backup_code"
		};
		return null;
	}).filter((element) => element !== null), [secondFactorsAvailableToAdd]);
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [secondFactorsAvailableToAdd.length > 0 && /* @__PURE__ */ jsx(Action.Closed, {
		value: "multi-factor",
		children: /* @__PURE__ */ jsx(ProfileSection.ActionMenu, {
			id: "mfa",
			triggerLocalizationKey: localizationKeys("userProfile.start.mfaSection.primaryButton"),
			onClick,
			children: strategies.map((method) => method && /* @__PURE__ */ jsx(ProfileSection.ActionMenuItem, {
				id: method.key,
				localizationKey: method.text,
				leftIcon: method.icon,
				onClick: () => {
					setSelectedStrategy(method.key);
					open("multi-factor");
				}
			}, method.key))
		})
	}), /* @__PURE__ */ jsx(Action.Open, {
		value: "multi-factor",
		children: /* @__PURE__ */ jsx(Action.Card, { children: selectedStrategy && /* @__PURE__ */ jsx(MfaScreen, { selectedStrategy }) })
	})] });
};

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