import { localizationKeys } from "../../../localization/localizationKeys.js";
import { mqu } from "../../../styledSystem/breakpoints.js";
import { useFormControl } from "../../../utils/useFormControl.js";
import { descriptors } from "../../../customizables/elementDescriptors.js";
import { useCardState, withCardStateProvider } from "../../../elements/contexts/index.js";
import { Flow } from "../../../customizables/Flow.js";
import { Badge, Col, Flex, Grid, Link, Text } from "../../../customizables/index.js";
import { handleError } from "../../../utils/errorHandler.js";
import { Form } from "../../../elements/Form.js";
import { FormButtons } from "../../../elements/FormButtons.js";
import { FormContainer } from "../../../elements/FormContainer.js";
import { useActionContext } from "../../../elements/Action/ActionRoot.js";
import { Action } from "../../../elements/Action/index.js";
import { useConfigureSSO } from "../ConfigureSSOContext.js";
import { useWizard } from "../elements/Wizard/WizardContext.js";
import { Step } from "../elements/Step.js";
import { ProfileSection } from "../../../elements/Section.js";
import { Switch } from "../../../elements/Switch.js";
import { useState } from "react";
import { useReverification } from "@clerk/shared/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/ConfigureSSO/steps/ConfirmationStep.tsx
const ConfirmationStep = () => {
	return /* @__PURE__ */ jsx(Flow.Part, {
		part: "ssoConfirmation",
		children: /* @__PURE__ */ jsxs(Step, {
			elementDescriptor: descriptors.configureSSOStep,
			elementId: descriptors.configureSSOStep.setId("confirmation"),
			children: [/* @__PURE__ */ jsxs(Step.Body, {
				sx: (t) => ({
					paddingInline: t.space.$8,
					paddingBlock: t.space.$4
				}),
				children: [
					/* @__PURE__ */ jsx(SsoStatusSection, {}),
					/* @__PURE__ */ jsx(EnableSsoSection, {}),
					/* @__PURE__ */ jsx(DomainSection, {}),
					/* @__PURE__ */ jsx(ConfigurationDetailsSection, {}),
					/* @__PURE__ */ jsx(ResetConnectionSection, {})
				]
			}), /* @__PURE__ */ jsx(Step.Footer, {})]
		})
	});
};
const SsoStatusSection = () => {
	const { enterpriseConnection } = useConfigureSSO();
	const isActive = !!enterpriseConnection?.active;
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("configureSSO.confirmation.statusSection.title"),
		id: "ssoStatus",
		sx: { border: 0 },
		children: /* @__PURE__ */ jsx(Flex, {
			justify: "start",
			children: /* @__PURE__ */ jsx(Badge, {
				colorScheme: isActive ? "success" : "danger",
				localizationKey: isActive ? localizationKeys("configureSSO.confirmation.statusSection.activeBadge") : localizationKeys("configureSSO.confirmation.statusSection.inactiveBadge")
			})
		})
	});
};
const EnableSsoSection = () => {
	const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO();
	const card = useCardState();
	const [isChecked, setIsChecked] = useState(!!enterpriseConnection?.active);
	const updateActive = useReverification((id, active) => updateEnterpriseConnection(id, { active }));
	const onActiveChange = async (active) => {
		if (card.isLoading) return;
		card.setError(void 0);
		card.setLoading();
		setIsChecked(active);
		try {
			const updated = await updateActive(enterpriseConnection.id, active);
			if (updated) setIsChecked(updated.active);
		} catch (err) {
			setIsChecked(!active);
			handleError(err, [], card.setError);
		} finally {
			card.setIdle();
		}
	};
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("configureSSO.confirmation.enableSection.title"),
		id: "enableSso",
		sx: (t) => ({
			border: 0,
			paddingBlock: t.space.$2
		}),
		children: /* @__PURE__ */ jsx(Switch, {
			isChecked,
			isDisabled: card.isLoading,
			onChange: (active) => void onActiveChange(active),
			"aria-label": "Enable SSO"
		})
	});
};
const DomainSection = () => {
	const { enterpriseConnection } = useConfigureSSO();
	const domain = enterpriseConnection?.domains?.[0];
	if (!domain) return null;
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("configureSSO.confirmation.domainSection.title"),
		id: "ssoDomain",
		sx: { border: 0 },
		children: /* @__PURE__ */ jsx(Link, {
			href: `https://${domain}`,
			isExternal: true,
			title: domain,
			sx: {
				display: "block",
				overflow: "hidden",
				whiteSpace: "nowrap",
				textOverflow: "ellipsis",
				textDecoration: "underline"
			},
			children: domain
		})
	});
};
const ConfigurationDetailsSection = () => {
	const { enterpriseConnection } = useConfigureSSO();
	const { goToStep } = useWizard();
	const samlConnection = enterpriseConnection?.samlConnection;
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("configureSSO.confirmation.configurationSection.title"),
		id: "ssoConfiguration",
		centered: false,
		children: /* @__PURE__ */ jsxs(Col, {
			gap: 3,
			children: [/* @__PURE__ */ jsxs(Grid, {
				gap: 3,
				sx: {
					width: "100%",
					alignItems: "center",
					gridTemplateColumns: "150px minmax(0, 1fr)"
				},
				children: [
					/* @__PURE__ */ jsx(Text, {
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.confirmation.configurationSection.ssoUrlLabel")
					}),
					/* @__PURE__ */ jsx(Link, {
						href: samlConnection?.idpSsoUrl ?? "",
						isExternal: true,
						title: samlConnection?.idpSsoUrl,
						sx: {
							display: "block",
							overflow: "hidden",
							whiteSpace: "nowrap",
							textOverflow: "ellipsis"
						},
						children: samlConnection?.idpSsoUrl
					}),
					/* @__PURE__ */ jsx(Text, {
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.confirmation.configurationSection.issuerLabel")
					}),
					/* @__PURE__ */ jsx(Text, {
						truncate: true,
						title: samlConnection?.idpEntityId,
						children: samlConnection?.idpEntityId
					}),
					/* @__PURE__ */ jsx(Text, {
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.confirmation.configurationSection.certificateLabel")
					}),
					/* @__PURE__ */ jsx(Text, {
						truncate: true,
						title: samlConnection?.idpCertificate,
						children: samlConnection?.idpCertificate
					})
				]
			}), /* @__PURE__ */ jsx(Flex, {
				justify: "start",
				sx: (t) => ({
					marginTop: t.space.$2,
					paddingInlineStart: 0,
					marginInline: "-10px"
				}),
				children: /* @__PURE__ */ jsx(ProfileSection.Button, {
					id: "configureAgain",
					onClick: () => goToStep("configure"),
					variant: "ghost",
					colorScheme: "primary",
					localizationKey: localizationKeys("configureSSO.confirmation.configurationSection.configureAgainLink")
				})
			})]
		})
	});
};
const ResetConnectionForm = withCardStateProvider((props) => {
	const { onReset, onSuccess } = props;
	const card = useCardState();
	const { enterpriseConnection, deleteEnterpriseConnection } = useConfigureSSO();
	const { goToStep } = useWizard();
	const deleteConnection = useReverification((id) => deleteEnterpriseConnection(id));
	const confirmationField = useFormControl("deleteConfirmation", "", {
		type: "text",
		label: localizationKeys("configureSSO.confirmation.resetSection.confirmationFieldLabel", { name: enterpriseConnection?.name ?? "" }),
		isRequired: true,
		placeholder: enterpriseConnection?.name
	});
	const canSubmit = Boolean(enterpriseConnection?.name && confirmationField.value === enterpriseConnection.name);
	const onSubmit = async () => {
		if (!enterpriseConnection || !canSubmit) return;
		try {
			await deleteConnection(enterpriseConnection.id);
			onSuccess();
			await goToStep("select-provider");
		} catch (err) {
			handleError(err, [confirmationField], card.setError);
		}
	};
	return /* @__PURE__ */ jsx(FormContainer, {
		headerTitle: localizationKeys("configureSSO.confirmation.resetSection.title"),
		sx: (t) => ({ gap: t.space.$0x5 }),
		children: /* @__PURE__ */ jsxs(Form.Root, {
			onSubmit,
			children: [
				/* @__PURE__ */ jsx(Col, {
					gap: 1,
					children: /* @__PURE__ */ jsx(Text, {
						colorScheme: "danger",
						localizationKey: localizationKeys("configureSSO.confirmation.resetSection.warning")
					})
				}),
				/* @__PURE__ */ jsx(Form.ControlRow, {
					elementId: confirmationField.id,
					children: /* @__PURE__ */ jsx(Form.PlainInput, {
						...confirmationField.props,
						ignorePasswordManager: true
					})
				}),
				/* @__PURE__ */ jsx(FormButtons, {
					submitLabel: localizationKeys("configureSSO.confirmation.resetSection.submitButton"),
					colorScheme: "danger",
					isDisabled: !canSubmit,
					onReset
				})
			]
		})
	});
});
const ResetConnectionScreen = () => {
	const { close } = useActionContext();
	return /* @__PURE__ */ jsx(ResetConnectionForm, {
		onSuccess: close,
		onReset: close
	});
};
const ResetConnectionSection = () => {
	return /* @__PURE__ */ jsx(ProfileSection.Root, {
		title: localizationKeys("configureSSO.confirmation.resetSection.title"),
		id: "resetSso",
		sx: {
			alignItems: "center",
			[mqu.md]: { alignItems: "flex-start" }
		},
		children: /* @__PURE__ */ jsxs(Action.Root, { children: [/* @__PURE__ */ jsx(Action.Closed, {
			value: "reset",
			children: /* @__PURE__ */ jsx(ProfileSection.Item, {
				id: "resetSso",
				sx: {
					paddingInlineStart: 0,
					marginInline: "-10px"
				},
				children: /* @__PURE__ */ jsx(Action.Trigger, {
					value: "reset",
					children: /* @__PURE__ */ jsx(ProfileSection.Button, {
						id: "resetSso",
						variant: "ghost",
						colorScheme: "danger",
						localizationKey: localizationKeys("configureSSO.confirmation.resetSection.title")
					})
				})
			})
		}), /* @__PURE__ */ jsx(Action.Open, {
			value: "reset",
			children: /* @__PURE__ */ jsx(Action.Card, {
				variant: "destructive",
				children: /* @__PURE__ */ jsx(ResetConnectionScreen, {})
			})
		})] })
	});
};

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