import { localizationKeys } from "../../../localization/localizationKeys.js";
import { useLocalizations } from "../../../localization/makeLocalizable.js";
import { common } from "../../../styledSystem/common.js";
import { mqu } from "../../../styledSystem/breakpoints.js";
import { descriptors } from "../../../customizables/elementDescriptors.js";
import { useCardState } from "../../../elements/contexts/index.js";
import { Flow } from "../../../customizables/Flow.js";
import { Box, Col, Grid, Span, Text } from "../../../customizables/index.js";
import { Alert } from "../../../elements/Alert.js";
import { handleError } from "../../../utils/errorHandler.js";
import { useConfigureSSO } from "../ConfigureSSOContext.js";
import { useWizard } from "../elements/Wizard/WizardContext.js";
import { Step } from "../elements/Step.js";
import React from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import { iconImageUrl } from "@clerk/shared/constants";
import { useUser } from "@clerk/shared/react/index";

//#region src/components/ConfigureSSO/steps/SelectProviderStep.tsx
/**
* Provider icons whose SVGs are monochromatic and should flip with the
* theme. Mirrors the SUPPORTS_MASK_IMAGE list in `common/ProviderIcon.tsx`
* — keep in sync if either grows.
*/
const MONOCHROMATIC_PROVIDER_ICONS = new Set(["okta"]);
const PROVIDER_GROUPS = [{
	id: "saml",
	label: localizationKeys("configureSSO.selectProviderStep.saml.groupLabel"),
	options: [{
		id: "saml_okta",
		label: localizationKeys("configureSSO.selectProviderStep.saml.okta"),
		iconId: "okta"
	}, {
		id: "saml_custom",
		label: localizationKeys("configureSSO.selectProviderStep.saml.customSaml"),
		iconId: "saml"
	}]
}];
const SelectProviderStep = () => {
	const { goToStep } = useWizard();
	const { setProvider, createEnterpriseConnection } = useConfigureSSO();
	const [selected, setSelected] = React.useState(null);
	const { user } = useUser();
	const card = useCardState();
	const handleContinue = async () => {
		if (!selected || !user) return;
		setProvider(selected);
		const primaryEmailAddress = user?.primaryEmailAddress;
		const hasVerifiedPrimaryEmailAddress = primaryEmailAddress?.verification.status === "verified";
		if (!primaryEmailAddress || !hasVerifiedPrimaryEmailAddress) {
			goToStep("verify-domain");
			return;
		}
		try {
			await createEnterpriseConnection(selected, primaryEmailAddress);
		} catch (err) {
			handleError(err, [], card.setError);
			return;
		}
		goToStep("configure");
	};
	return /* @__PURE__ */ jsx(Flow.Part, {
		part: "selectProvider",
		children: /* @__PURE__ */ jsxs(Step, {
			elementDescriptor: descriptors.configureSSOStep,
			elementId: descriptors.configureSSOStep.setId("select-provider"),
			children: [
				/* @__PURE__ */ jsx(Step.Header, {
					title: localizationKeys("configureSSO.selectProviderStep.title"),
					description: localizationKeys("configureSSO.selectProviderStep.subtitle")
				}),
				/* @__PURE__ */ jsx(Step.Body, { children: /* @__PURE__ */ jsxs(Step.Section, {
					sx: (theme) => ({ gap: theme.space.$5 }),
					children: [
						/* @__PURE__ */ jsxs(Col, {
							sx: (theme) => ({ gap: theme.space.$1x5 }),
							children: [/* @__PURE__ */ jsx(Text, {
								as: "p",
								variant: "subtitle",
								localizationKey: localizationKeys("configureSSO.selectProviderStep.body.title")
							}), /* @__PURE__ */ jsx(Text, {
								as: "p",
								colorScheme: "secondary",
								localizationKey: localizationKeys("configureSSO.selectProviderStep.body.description")
							})]
						}),
						PROVIDER_GROUPS.map((group) => /* @__PURE__ */ jsxs(Col, {
							sx: (theme) => ({ gap: theme.space.$3 }),
							children: [/* @__PURE__ */ jsx(Text, {
								as: "label",
								variant: "subtitle",
								localizationKey: group.label
							}), /* @__PURE__ */ jsx(Grid, {
								gap: 3,
								sx: {
									gridTemplateColumns: "repeat(2, 1fr)",
									[mqu.sm]: { gridTemplateColumns: "1fr" }
								},
								children: group.options.map((option) => /* @__PURE__ */ jsx(ProviderCard, {
									name: "configure-sso-provider",
									value: option.id,
									iconId: option.iconId,
									label: option.label,
									checked: selected === option.id,
									onChange: () => setSelected(option.id)
								}, option.id))
							})]
						}, group.id)),
						/* @__PURE__ */ jsx(Alert, {
							variant: "warning",
							title: localizationKeys("configureSSO.selectProviderStep.warning")
						}),
						card.error && /* @__PURE__ */ jsx(Alert, {
							variant: "danger",
							title: card.error,
							sx: (t) => ({ margin: t.space.$3 })
						})
					]
				}) }),
				/* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, { isDisabled: true }), /* @__PURE__ */ jsx(Step.Footer.Continue, {
					onClick: handleContinue,
					isLoading: card.isLoading,
					isDisabled: !selected
				})] })
			]
		})
	});
};
const ProviderCard = ({ name, value, iconId, label, checked, onChange }) => {
	const { t } = useLocalizations();
	const labelText = t(label);
	return /* @__PURE__ */ jsxs(Box, {
		as: "label",
		sx: (theme) => ({
			borderWidth: theme.borderWidths.$normal,
			borderStyle: theme.borderStyles.$solid,
			borderColor: theme.colors.$borderAlpha150,
			borderRadius: theme.radii.$md,
			color: theme.colors.$neutralAlpha600,
			display: "flex",
			flexDirection: "column",
			alignItems: "center",
			justifyContent: "center",
			gap: theme.space.$2,
			height: theme.sizes.$32,
			padding: theme.space.$1x5,
			backgroundColor: theme.colors.$colorBackground,
			cursor: "pointer",
			position: "relative",
			"&:hover": { backgroundColor: theme.colors.$neutralAlpha50 },
			"&:has(input:focus-visible)": {
				...common.focusRingStyles(theme),
				borderColor: theme.colors.$borderAlpha300
			},
			"&:has(input:checked)": {
				borderColor: theme.colors.$borderAlpha300,
				...common.focusRingStyles(theme)
			}
		}),
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "radio",
				name,
				value,
				checked,
				onChange,
				css: {
					position: "absolute",
					width: "1px",
					height: "1px",
					padding: 0,
					margin: "-1px",
					overflow: "hidden",
					clip: "rect(0,0,0,0)",
					whiteSpace: "nowrap",
					borderWidth: 0
				}
			}),
			/* @__PURE__ */ jsx(Span, {
				"aria-hidden": true,
				sx: (theme) => {
					const isMonochromatic = MONOCHROMATIC_PROVIDER_ICONS.has(iconId);
					const baseSize = {
						width: theme.sizes.$8,
						height: theme.sizes.$8
					};
					if (isMonochromatic) return {
						...baseSize,
						backgroundColor: theme.colors.$colorForeground,
						maskImage: `url(${iconImageUrl(iconId)})`,
						maskSize: "contain",
						maskPosition: "center",
						maskRepeat: "no-repeat"
					};
					return {
						...baseSize,
						backgroundImage: `url(${iconImageUrl(iconId)})`,
						backgroundSize: "contain",
						backgroundPosition: "center",
						backgroundRepeat: "no-repeat"
					};
				}
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "span",
				variant: "body",
				sx: (theme) => ({ color: theme.colors.$colorForeground }),
				children: labelText
			})
		]
	});
};

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