import { localizationKeys } from "../../../localization/localizationKeys.js";
import check_default from "../../../icons/check.js";
import clipboard_outline_default from "../../../icons/clipboard-outline.js";
import close_default from "../../../icons/close.js";
import upload_default from "../../../icons/upload.js";
import { useLocalizations } from "../../../localization/makeLocalizable.js";
import { useFormControl } from "../../../utils/useFormControl.js";
import { descriptors } from "../../../customizables/elementDescriptors.js";
import { useCardState } from "../../../elements/contexts/index.js";
import { Flow } from "../../../customizables/Flow.js";
import { Badge, Box, Button, Col, Flex, Heading, Icon, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../customizables/index.js";
import { handleError } from "../../../utils/errorHandler.js";
import { Field } from "../../../elements/FieldControl.js";
import { Form } from "../../../elements/Form.js";
import { ClipboardInput } from "../../../elements/ClipboardInput.js";
import { SegmentedControl } from "../../../elements/SegmentedControl.js";
import { useConfigureSSO } from "../ConfigureSSOContext.js";
import { useWizard } from "../elements/Wizard/WizardContext.js";
import { Wizard } from "../elements/Wizard/Wizard.js";
import { Step } from "../elements/Step.js";
import { useConfigureStepTranslations } from "./configureStepTranslations.js";
import { isClerkAPIResponseError } from "@clerk/shared/error";
import React from "react";
import { useReverification } from "@clerk/shared/react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/ConfigureSSO/steps/ConfigureStep.tsx
const ConfigureStep = () => {
	const { key } = useConfigureStepTranslations();
	return /* @__PURE__ */ jsx(Flow.Part, {
		part: "configureCreateApp",
		children: /* @__PURE__ */ jsx(Step, {
			elementDescriptor: descriptors.configureSSOStep,
			elementId: descriptors.configureSSOStep.setId("configure"),
			children: /* @__PURE__ */ jsxs(Wizard, { children: [
				/* @__PURE__ */ jsxs(Wizard.Step, {
					id: "create-app",
					children: [/* @__PURE__ */ jsx(Step.Header, {
						title: localizationKeys(key("headerTitle")),
						description: localizationKeys(key("createApp.headerSubtitle")),
						children: /* @__PURE__ */ jsx(InnerStepCounter, {})
					}), /* @__PURE__ */ jsx(CreateAppSubStep, {})]
				}),
				/* @__PURE__ */ jsxs(Wizard.Step, {
					id: "configure-attributes",
					children: [/* @__PURE__ */ jsx(Step.Header, {
						title: localizationKeys(key("headerTitle")),
						description: localizationKeys(key("configureAttributes.headerSubtitle")),
						children: /* @__PURE__ */ jsx(InnerStepCounter, {})
					}), /* @__PURE__ */ jsx(ConfigureAttributesSubStep, {})]
				}),
				/* @__PURE__ */ jsxs(Wizard.Step, {
					id: "assign-users",
					children: [/* @__PURE__ */ jsx(Step.Header, {
						title: localizationKeys(key("headerTitle")),
						description: localizationKeys(key("assignUsers.headerSubtitle")),
						children: /* @__PURE__ */ jsx(InnerStepCounter, {})
					}), /* @__PURE__ */ jsx(AssignUsersSubStep, {})]
				}),
				/* @__PURE__ */ jsxs(Wizard.Step, {
					id: "submit-saml-config",
					children: [/* @__PURE__ */ jsx(Step.Header, {
						title: localizationKeys(key("headerTitle")),
						description: localizationKeys(key("metadataUrl.headerSubtitle")),
						children: /* @__PURE__ */ jsx(InnerStepCounter, {})
					}), /* @__PURE__ */ jsx(SubmitSamlConfigSubStep, {})]
				})
			] })
		})
	});
};
const InnerStepCounter = () => {
	const { currentIndex, totalSteps } = useWizard();
	return /* @__PURE__ */ jsx(Step.Counter, {
		total: totalSteps,
		current: currentIndex + 1
	});
};
const ATTRIBUTE_ROWS = [
	{
		id: "email",
		isRequired: true,
		attribute: localizationKeys("configureSSO.configureStep.attributeMapping.rows.email.attribute"),
		claim: localizationKeys("configureSSO.configureStep.attributeMapping.rows.email.claim")
	},
	{
		id: "firstName",
		isRequired: false,
		attribute: localizationKeys("configureSSO.configureStep.attributeMapping.rows.firstName.attribute"),
		claim: localizationKeys("configureSSO.configureStep.attributeMapping.rows.firstName.claim")
	},
	{
		id: "lastName",
		isRequired: false,
		attribute: localizationKeys("configureSSO.configureStep.attributeMapping.rows.lastName.attribute"),
		claim: localizationKeys("configureSSO.configureStep.attributeMapping.rows.lastName.claim")
	}
];
const ATTRIBUTE_PAIRS = [
	{
		id: "email",
		name: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.email.name"),
		expression: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.email.expression")
	},
	{
		id: "firstName",
		name: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.firstName.name"),
		expression: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.firstName.expression")
	},
	{
		id: "lastName",
		name: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.lastName.name"),
		expression: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.lastName.expression")
	}
];
const CreateAppSubStep = () => {
	const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
	const { enterpriseConnection, provider } = useConfigureSSO();
	const { key } = useConfigureStepTranslations();
	const acsUrl = enterpriseConnection?.samlConnection?.acsUrl ?? "";
	const spEntityId = enterpriseConnection?.samlConnection?.spEntityId ?? "";
	const acsUrlField = useFormControl("acsUrl", acsUrl, {
		type: "text",
		label: localizationKeys("configureSSO.configureStep.spFields.acsUrl.label"),
		isRequired: false
	});
	const spEntityIdField = useFormControl("spEntityId", spEntityId, {
		type: "text",
		label: localizationKeys("configureSSO.configureStep.spFields.spEntityId.label"),
		isRequired: false
	});
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__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(Heading, {
						as: "h3",
						textVariant: "subtitle",
						localizationKey: localizationKeys(key("createApp.title"))
					}),
					provider === "saml_okta" && /* @__PURE__ */ jsx(OktaCreateAppStepContent, {}),
					provider === "saml_custom" && /* @__PURE__ */ jsx(Text, {
						as: "p",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlCustom.createApp.subtitle")
					})
				]
			}),
			provider === "saml_okta" && /* @__PURE__ */ jsx(OktaServiceProviderStepContent, {}),
			/* @__PURE__ */ jsx(Form.ControlRow, {
				elementId: acsUrlField.id,
				children: /* @__PURE__ */ jsx(Form.CommonInputWrapper, {
					...acsUrlField.props,
					children: /* @__PURE__ */ jsx(ClipboardInput, {
						value: acsUrl,
						readOnly: true,
						copyIcon: clipboard_outline_default,
						copiedIcon: check_default
					})
				})
			}),
			/* @__PURE__ */ jsx(Form.ControlRow, {
				elementId: spEntityIdField.id,
				children: /* @__PURE__ */ jsx(Form.CommonInputWrapper, {
					...spEntityIdField.props,
					children: /* @__PURE__ */ jsx(ClipboardInput, {
						value: spEntityId,
						readOnly: true,
						copyIcon: clipboard_outline_default,
						copiedIcon: check_default
					})
				})
			}),
			provider === "saml_okta" && /* @__PURE__ */ jsx(OktaCompleteSamlIntegrationStepContent, {})
		]
	}) }), /* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, {
		onClick: () => goPrev(),
		isDisabled: isFirstStep
	}), /* @__PURE__ */ jsx(Step.Footer.Continue, {
		onClick: () => goNext(),
		isDisabled: isLastStep
	})] })] });
};
const OktaServiceProviderStepContent = () => {
	return /* @__PURE__ */ jsxs(Col, {
		sx: (theme) => ({ gap: theme.space.$1x5 }),
		children: [
			/* @__PURE__ */ jsx(Heading, {
				as: "h3",
				textVariant: "subtitle",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.serviceProvider.title")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "p",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.serviceProvider.paragraph1")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "p",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.serviceProvider.paragraph2")
			})
		]
	});
};
const OktaCreateAppStepContent = () => {
	return /* @__PURE__ */ jsxs(Col, {
		as: "ul",
		sx: (theme) => ({
			gap: theme.space.$1x5,
			margin: 0,
			paddingInlineStart: theme.space.$5,
			listStyleType: "disc"
		}),
		children: [
			/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.createApp.step1")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.createApp.step2")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.createApp.step3")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.createApp.step4")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.createApp.step5")
			})
		]
	});
};
const OktaCompleteSamlIntegrationStepContent = () => {
	return /* @__PURE__ */ jsxs(Col, {
		sx: (theme) => ({ gap: theme.space.$1x5 }),
		children: [/* @__PURE__ */ jsx(Heading, {
			as: "h3",
			textVariant: "subtitle",
			localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.completeSamlIntegration.title")
		}), /* @__PURE__ */ jsxs(Col, {
			as: "ul",
			sx: (theme) => ({
				gap: theme.space.$1x5,
				margin: 0,
				paddingInlineStart: theme.space.$5,
				listStyleType: "disc"
			}),
			children: [/* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.completeSamlIntegration.step1")
			}), /* @__PURE__ */ jsx(Text, {
				as: "li",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.completeSamlIntegration.step2")
			})]
		})]
	});
};
const ConfigureAttributesSubStep = () => {
	const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
	const { provider } = useConfigureSSO();
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Step.Body, { children: /* @__PURE__ */ jsxs(Step.Section, {
		sx: (theme) => ({ gap: theme.space.$3 }),
		children: [
			provider === "saml_custom" && /* @__PURE__ */ jsx(Heading, {
				as: "h3",
				textVariant: "subtitle",
				localizationKey: localizationKeys("configureSSO.configureStep.samlCustom.configureAttributes.title")
			}),
			/* @__PURE__ */ jsxs(Table, {
				sx: (theme) => ({ "tr > th:first-of-type": { paddingInlineStart: theme.space.$4 } }),
				children: [/* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [/* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Text, {
					sx: (theme) => ({ fontSize: theme.fontSizes.$xs }),
					localizationKey: localizationKeys("configureSSO.configureStep.attributeMapping.columns.attribute")
				}) }), /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Text, {
					sx: (theme) => ({ fontSize: theme.fontSizes.$xs }),
					localizationKey: localizationKeys("configureSSO.configureStep.attributeMapping.columns.claimName")
				}) })] }) }), /* @__PURE__ */ jsx(Tbody, { children: ATTRIBUTE_ROWS.map((row) => /* @__PURE__ */ jsxs(Tr, { children: [/* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, {
					as: "span",
					align: "center",
					sx: (theme) => ({ gap: theme.space.$2 }),
					children: [/* @__PURE__ */ jsx(Text, {
						colorScheme: "secondary",
						localizationKey: row.attribute
					}), /* @__PURE__ */ jsx(Badge, {
						colorScheme: row.isRequired ? "warning" : "primary",
						localizationKey: localizationKeys(row.isRequired ? "configureSSO.configureStep.attributeMapping.badges.required" : "configureSSO.configureStep.attributeMapping.badges.optional")
					})]
				}) }), /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Text, {
					as: "span",
					sx: { fontFamily: "monospace" },
					localizationKey: row.claim
				}) })] }, row.id)) })]
			}),
			provider === "saml_okta" && /* @__PURE__ */ jsx(OktaConfigureAttributesStepContent, {})
		]
	}) }), /* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, {
		onClick: () => goPrev(),
		isDisabled: isFirstStep
	}), /* @__PURE__ */ jsx(Step.Footer.Continue, {
		onClick: () => goNext(),
		isDisabled: isLastStep
	})] })] });
};
const OktaConfigureAttributesStepContent = () => {
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
		as: "p",
		colorScheme: "secondary",
		localizationKey: localizationKeys("configureSSO.configureStep.attributeMapping.paragraph")
	}), /* @__PURE__ */ jsxs(Col, {
		as: "ol",
		sx: (theme) => ({
			gap: theme.space.$1x5,
			margin: 0,
			paddingInlineStart: theme.space.$5,
			listStyleType: "decimal"
		}),
		children: [/* @__PURE__ */ jsx(Text, {
			as: "li",
			colorScheme: "secondary",
			localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.step1")
		}), /* @__PURE__ */ jsxs(Text, {
			as: "li",
			colorScheme: "secondary",
			children: [/* @__PURE__ */ jsx(Text, {
				as: "span",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.step2")
			}), /* @__PURE__ */ jsx(Col, {
				as: "ul",
				sx: (theme) => ({
					gap: theme.space.$1x5,
					margin: 0,
					marginTop: theme.space.$1x5,
					paddingInlineStart: theme.space.$5,
					listStyleType: "\"- \""
				}),
				children: ATTRIBUTE_PAIRS.map((pair) => /* @__PURE__ */ jsxs(Text, {
					as: "li",
					children: [
						/* @__PURE__ */ jsx(Badge, {
							localizationKey: pair.name,
							sx: { fontFamily: "monospace" }
						}),
						/* @__PURE__ */ jsx(Text, {
							as: "span",
							localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.configureAttributes.pairs.conjunction")
						}),
						/* @__PURE__ */ jsx(Badge, {
							localizationKey: pair.expression,
							sx: { fontFamily: "monospace" }
						})
					]
				}, pair.id))
			})]
		})]
	})] });
};
const AssignUsersSubStep = () => {
	const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
	const { provider } = useConfigureSSO();
	if (provider === "saml_custom") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Step.Body, { children: /* @__PURE__ */ jsxs(Step.Section, {
		sx: (theme) => ({ gap: theme.space.$3 }),
		children: [/* @__PURE__ */ jsx(Heading, {
			as: "h3",
			textVariant: "subtitle",
			localizationKey: localizationKeys("configureSSO.configureStep.samlCustom.assignUsers.title")
		}), /* @__PURE__ */ jsx(Text, {
			as: "p",
			colorScheme: "secondary",
			localizationKey: localizationKeys("configureSSO.configureStep.samlCustom.assignUsers.paragraph")
		})]
	}) }), /* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, {
		onClick: () => goPrev(),
		isDisabled: isFirstStep
	}), /* @__PURE__ */ jsx(Step.Footer.Continue, {
		onClick: () => goNext(),
		isDisabled: isLastStep
	})] })] });
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Step.Body, { children: /* @__PURE__ */ jsxs(Step.Section, {
		sx: (theme) => ({ gap: theme.space.$3 }),
		children: [
			/* @__PURE__ */ jsx(Heading, {
				as: "h3",
				textVariant: "subtitle",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.title")
			}),
			/* @__PURE__ */ jsx(Text, {
				as: "p",
				colorScheme: "secondary",
				localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.paragraph")
			}),
			/* @__PURE__ */ jsxs(Col, {
				as: "ol",
				sx: (theme) => ({
					gap: theme.space.$1x5,
					margin: 0,
					paddingInlineStart: theme.space.$5,
					listStyleType: "decimal"
				}),
				children: [
					/* @__PURE__ */ jsx(Text, {
						as: "li",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.step1")
					}),
					/* @__PURE__ */ jsx(Text, {
						as: "li",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.step2")
					}),
					/* @__PURE__ */ jsx(Text, {
						as: "li",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.step3")
					}),
					/* @__PURE__ */ jsx(Text, {
						as: "li",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.step4")
					}),
					/* @__PURE__ */ jsx(Text, {
						as: "li",
						colorScheme: "secondary",
						localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.assignUsers.step5")
					})
				]
			})
		]
	}) }), /* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, {
		onClick: () => goPrev(),
		isDisabled: isFirstStep
	}), /* @__PURE__ */ jsx(Step.Footer.Continue, {
		onClick: () => goNext(),
		isDisabled: isLastStep
	})] })] });
};
const SubmitSamlConfigSubStep = () => {
	const card = useCardState();
	const { t } = useLocalizations();
	const { goNext, goPrev, isFirstStep } = useWizard();
	const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO();
	const { key } = useConfigureStepTranslations();
	const samlConnection = enterpriseConnection?.samlConnection;
	const hasExistingConfig = Boolean(samlConnection?.idpSsoUrl || samlConnection?.idpEntityId || samlConnection?.idpCertificate || samlConnection?.idpMetadataUrl);
	const existingCertPresent = Boolean(samlConnection?.idpCertificate);
	const [mode, setMode] = React.useState(hasExistingConfig ? "manual" : "metadataUrl");
	const [certFile, setCertFile] = React.useState(null);
	const updateConnection = useReverification(React.useCallback(async (params) => {
		if (!enterpriseConnection) throw new Error("Enterprise connection required");
		return updateEnterpriseConnection(enterpriseConnection.id, params);
	}, [enterpriseConnection, updateEnterpriseConnection]));
	const metadataUrlField = useFormControl("idpMetadataUrl", samlConnection?.idpMetadataUrl ?? "", {
		type: "text",
		label: localizationKeys(key("metadataUrl.label")),
		placeholder: localizationKeys(key("metadataUrl.placeholder")),
		isRequired: true
	});
	const signOnUrlField = useFormControl("idpSsoUrl", samlConnection?.idpSsoUrl ?? "", {
		type: "text",
		label: localizationKeys(key("manual.signOnUrl.label")),
		placeholder: localizationKeys(key("manual.signOnUrl.placeholder")),
		isRequired: true
	});
	const issuerField = useFormControl("idpEntityId", samlConnection?.idpEntityId ?? "", {
		type: "text",
		label: localizationKeys(key("manual.issuer.label")),
		placeholder: localizationKeys(key("manual.issuer.placeholder")),
		isRequired: true
	});
	const certFileField = useFormControl("idpCertificate", "", {
		type: "text",
		label: localizationKeys(key("manual.signingCertificate.label")),
		isRequired: true
	});
	const trimmedMetadataUrl = metadataUrlField.value.trim();
	const trimmedSignOnUrl = signOnUrlField.value.trim();
	const trimmedIssuer = issuerField.value.trim();
	const hasCert = certFile !== null || existingCertPresent;
	const canSubmit = !card.isLoading && (mode === "metadataUrl" && trimmedMetadataUrl.length > 0 || mode === "manual" && trimmedSignOnUrl.length > 0 && trimmedIssuer.length > 0 && hasCert);
	const handleContinue = async () => {
		if (!enterpriseConnection || !canSubmit) return;
		card.setError(void 0);
		card.setLoading();
		try {
			if (mode === "metadataUrl") await updateConnection({ saml: { idpMetadataUrl: trimmedMetadataUrl } });
			else {
				const samlPayload = {
					idpSsoUrl: trimmedSignOnUrl,
					idpEntityId: trimmedIssuer
				};
				if (certFile !== null) samlPayload.idpCertificate = await certFile.text();
				await updateConnection({ saml: samlPayload });
			}
			goNext();
		} catch (err) {
			handleError(err, mode === "metadataUrl" ? [metadataUrlField] : [
				signOnUrlField,
				issuerField,
				certFileField
			], card.setError);
			if (isClerkAPIResponseError(err)) {
				const unscopedSamlError = err.errors.find((e) => e.code?.startsWith("saml_") && !e.meta?.paramName);
				if (unscopedSamlError) {
					(mode === "metadataUrl" ? metadataUrlField : signOnUrlField).setError(unscopedSamlError);
					card.setError(void 0);
				}
			}
		} finally {
			card.setIdle();
		}
	};
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Step.Body, { children: /* @__PURE__ */ jsxs(Step.Section, {
		fill: true,
		gap: 5,
		children: [
			/* @__PURE__ */ jsx(Heading, {
				as: "h3",
				textVariant: "subtitle",
				localizationKey: localizationKeys(key("submitSamlConfig.title"))
			}),
			/* @__PURE__ */ jsxs(SegmentedControl.Root, {
				"aria-label": t(localizationKeys(key("modes.ariaLabel"))),
				value: mode,
				onChange: (value) => {
					card.setError(void 0);
					setMode(value);
				},
				fullWidth: true,
				children: [/* @__PURE__ */ jsx(SegmentedControl.Button, {
					value: "metadataUrl",
					text: localizationKeys(key("modes.metadataUrl"))
				}), /* @__PURE__ */ jsx(SegmentedControl.Button, {
					value: "manual",
					text: localizationKeys(key("modes.manual"))
				})]
			}),
			mode === "metadataUrl" ? /* @__PURE__ */ jsx(MetadataUrlPanel, { field: metadataUrlField }) : /* @__PURE__ */ jsx(ManualEntryPanel, {
				signOnUrlField,
				issuerField,
				certFileField,
				certFile,
				setCertFile,
				existingCertPresent
			})
		]
	}) }), /* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, {
		onClick: () => goPrev(),
		isDisabled: isFirstStep || card.isLoading
	}), /* @__PURE__ */ jsx(Step.Footer.Continue, {
		onClick: handleContinue,
		isLoading: card.isLoading,
		isDisabled: !canSubmit
	})] })] });
};
const MetadataUrlPanel = ({ field }) => {
	const { key } = useConfigureStepTranslations();
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
		as: "p",
		colorScheme: "secondary",
		localizationKey: localizationKeys(key("metadataUrl.description"))
	}), /* @__PURE__ */ jsx(Form.ControlRow, {
		elementId: field.id,
		children: /* @__PURE__ */ jsx(Form.PlainInput, { ...field.props })
	})] });
};
const ManualEntryPanel = ({ signOnUrlField, issuerField, certFileField, certFile, setCertFile, existingCertPresent }) => {
	const { t } = useLocalizations();
	const certInputRef = React.useRef(null);
	const { key } = useConfigureStepTranslations();
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		/* @__PURE__ */ jsx(Text, {
			as: "p",
			colorScheme: "secondary",
			localizationKey: localizationKeys(key("manual.description"))
		}),
		/* @__PURE__ */ jsx(Form.ControlRow, {
			elementId: signOnUrlField.id,
			children: /* @__PURE__ */ jsx(Form.PlainInput, { ...signOnUrlField.props })
		}),
		/* @__PURE__ */ jsx(Form.ControlRow, {
			elementId: issuerField.id,
			children: /* @__PURE__ */ jsx(Form.PlainInput, { ...issuerField.props })
		}),
		/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Field.Root, {
			...certFileField.props,
			children: [/* @__PURE__ */ jsxs(Col, {
				gap: 2,
				children: [
					/* @__PURE__ */ jsx(Field.LabelRow, { children: /* @__PURE__ */ jsx(Field.Label, {}) }),
					/* @__PURE__ */ jsx("input", {
						ref: certInputRef,
						type: "file",
						accept: ".pem,.key,.crt,.cer,.cert",
						multiple: false,
						style: { display: "none" },
						onChange: (e) => {
							setCertFile(e.target.files?.[0] ?? null);
							certFileField.clearFeedback();
						}
					}),
					certFile === null ? /* @__PURE__ */ jsxs(Flex, {
						align: "center",
						gap: 2,
						sx: {
							alignSelf: "flex-start",
							flexWrap: "wrap"
						},
						children: [existingCertPresent && /* @__PURE__ */ jsx(Badge, { localizationKey: localizationKeys("configureSSO.configureStep.samlOkta.manual.signingCertificate.fileUploaded") }), /* @__PURE__ */ jsxs(Button, {
							size: "xs",
							variant: "outline",
							onClick: () => certInputRef.current?.click(),
							children: [/* @__PURE__ */ jsx(Icon, {
								icon: upload_default,
								size: "sm",
								colorScheme: "neutral",
								sx: (t$1) => ({ marginInlineEnd: t$1.space.$1 })
							}), /* @__PURE__ */ jsx(Text, {
								as: "span",
								localizationKey: localizationKeys(existingCertPresent ? "configureSSO.configureStep.samlOkta.manual.signingCertificate.replaceFile" : "configureSSO.configureStep.samlOkta.manual.signingCertificate.uploadFile")
							})]
						})]
					}) : /* @__PURE__ */ jsxs(Flex, {
						align: "center",
						gap: 2,
						sx: (theme) => ({
							paddingTop: theme.space.$1,
							paddingBottom: theme.space.$1
						}),
						children: [/* @__PURE__ */ jsx(Text, {
							as: "span",
							colorScheme: "secondary",
							variant: "buttonSmall",
							children: certFile.name
						}), /* @__PURE__ */ jsx(Button, {
							variant: "ghost",
							colorScheme: "neutral",
							"aria-label": t(localizationKeys("configureSSO.configureStep.samlOkta.manual.signingCertificate.removeFile")),
							onClick: () => {
								setCertFile(null);
								certFileField.clearFeedback();
								if (certInputRef.current) certInputRef.current.value = "";
							},
							sx: (t$1) => ({ padding: t$1.space.$1 }),
							children: /* @__PURE__ */ jsx(Icon, {
								icon: close_default,
								size: "xs"
							})
						})]
					})
				]
			}), /* @__PURE__ */ jsx(Field.Feedback, {})]
		}) })
	] });
};

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