import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import { useUserProfileContext } from "../../contexts/components/UserProfile.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
import { Col } from "../../customizables/index.js";
import { Card } from "../../elements/Card/index.js";
import { Header } from "../../elements/Header.js";
import { getSecondFactors } from "./utils.js";
import { ActiveDevicesSection } from "./ActiveDevicesSection.js";
import { DeleteSection } from "./DeleteSection.js";
import { MfaSection } from "./MfaSection.js";
import { PasskeySection } from "./PasskeySection.js";
import { PasswordSection } from "./PasswordSection.js";
import { useUser } from "@clerk/shared/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/UserProfile/SecurityPage.tsx
const SecurityPage = withCardStateProvider(() => {
	const { attributes, instanceIsPasswordBased } = useEnvironment().userSettings;
	const card = useCardState();
	const { user } = useUser();
	const { shouldAllowIdentificationCreation } = useUserProfileContext();
	const showPassword = instanceIsPasswordBased;
	const showPasskey = attributes.passkey?.enabled && shouldAllowIdentificationCreation;
	const showMfa = getSecondFactors(attributes).length > 0;
	const showDelete = user?.deleteSelfEnabled;
	return /* @__PURE__ */ jsx(Col, {
		elementDescriptor: descriptors.page,
		sx: (t) => ({ gap: t.space.$8 }),
		children: /* @__PURE__ */ jsxs(Col, {
			elementDescriptor: descriptors.profilePage,
			elementId: descriptors.profilePage.setId("security"),
			children: [
				/* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
					localizationKey: localizationKeys("userProfile.start.headerTitle__security"),
					sx: (t) => ({ marginBottom: t.space.$4 }),
					textVariant: "h2"
				}) }),
				/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
				showPassword && /* @__PURE__ */ jsx(PasswordSection, {}),
				showPasskey && /* @__PURE__ */ jsx(PasskeySection, {}),
				showMfa && /* @__PURE__ */ jsx(MfaSection, {}),
				/* @__PURE__ */ jsx(ActiveDevicesSection, {}),
				showDelete && /* @__PURE__ */ jsx(DeleteSection, {})
			]
		})
	});
});

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