import caret_left_default from "../../../icons/caret-left.js";
import caret_right_default from "../../../icons/caret-right.js";
import { useLocalizations } from "../../../localization/makeLocalizable.js";
import { common } from "../../../styledSystem/common.js";
import { descriptors } from "../../../customizables/elementDescriptors.js";
import { Badge, Button, Col, Flex, Heading, Icon, Text } from "../../../customizables/index.js";
import { ProfileCardFooter } from "./ProfileCard.js";
import "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/ConfigureSSO/elements/Step.tsx
const Layout = ({ sx,...props }) => /* @__PURE__ */ jsx(Col, {
	...props,
	sx: [{
		flex: 1,
		minHeight: 0
	}, sx]
});
const Section = ({ fill, sx,...props }) => /* @__PURE__ */ jsx(Col, {
	...props,
	sx: [
		(theme) => ({ padding: theme.space.$5 }),
		fill && { flex: 1 },
		sx
	]
});
const Header = ({ title, description, children }) => {
	const { t } = useLocalizations();
	const titleText = typeof title === "string" ? title : t(title);
	const descriptionText = description ? typeof description === "string" ? description : t(description) : null;
	return /* @__PURE__ */ jsx(Section, {
		sx: (theme) => ({
			borderBottomWidth: theme.borderWidths.$normal,
			borderBottomStyle: theme.borderStyles.$solid,
			borderBottomColor: theme.colors.$borderAlpha100
		}),
		children: /* @__PURE__ */ jsxs(Flex, {
			align: "start",
			justify: "between",
			sx: (theme) => ({ gap: theme.space.$4 }),
			children: [/* @__PURE__ */ jsxs(Col, {
				sx: (theme) => ({
					gap: theme.space.$2,
					minWidth: 0
				}),
				children: [/* @__PURE__ */ jsx(Heading, {
					textVariant: "h2",
					children: titleText
				}), descriptionText && /* @__PURE__ */ jsx(Text, {
					as: "p",
					colorScheme: "secondary",
					children: descriptionText
				})]
			}), children]
		})
	});
};
const Body = ({ sx,...props }) => /* @__PURE__ */ jsx(Col, {
	as: "main",
	...props,
	sx: [(t) => ({
		flex: 1,
		minHeight: 0,
		overflowY: "auto",
		...common.unstyledScrollbar(t)
	}), sx]
});
const FooterPrevious = ({ onClick, isDisabled, isLoading, label = "Previous" }) => {
	const { t } = useLocalizations();
	const labelText = typeof label === "string" ? label : t(label);
	const handleClick = onClick ? () => {
		onClick();
	} : void 0;
	return /* @__PURE__ */ jsxs(Button, {
		elementDescriptor: descriptors.configureSSOFooterPreviousButton,
		variant: "outline",
		size: "sm",
		isDisabled,
		isLoading,
		onClick: handleClick,
		children: [/* @__PURE__ */ jsx(Icon, {
			icon: caret_left_default,
			size: "sm",
			sx: (t$1) => ({ marginInlineEnd: t$1.space.$1 })
		}), labelText]
	});
};
FooterPrevious.displayName = "Step.Footer.Previous";
const FooterContinue = ({ onClick, isDisabled, isLoading, label = "Continue" }) => {
	const { t } = useLocalizations();
	const labelText = typeof label === "string" ? label : t(label);
	const handleClick = onClick ? () => {
		onClick();
	} : void 0;
	return /* @__PURE__ */ jsxs(Button, {
		elementDescriptor: descriptors.configureSSOFooterContinueButton,
		variant: "solid",
		size: "sm",
		isDisabled,
		isLoading,
		onClick: handleClick,
		children: [labelText, /* @__PURE__ */ jsx(Icon, {
			icon: caret_right_default,
			size: "sm",
			sx: (t$1) => ({ marginInlineStart: t$1.space.$1 })
		})]
	});
};
FooterContinue.displayName = "Step.Footer.Continue";
const Footer = ({ children }) => /* @__PURE__ */ jsx(ProfileCardFooter, { children });
const FooterCompound = Object.assign(Footer, {
	Previous: FooterPrevious,
	Continue: FooterContinue
});
const Counter = ({ total, current }) => {
	if (total <= 1) return null;
	return /* @__PURE__ */ jsx(Badge, {
		elementDescriptor: descriptors.configureSSOStepCounter,
		colorScheme: "primary",
		sx: { whiteSpace: "nowrap" },
		children: /* @__PURE__ */ jsxs(Text, {
			as: "span",
			sx: (t) => ({ fontSize: t.fontSizes.$xs }),
			children: [
				"Step ",
				current,
				"/",
				total
			]
		})
	});
};
Counter.displayName = "Step.Counter";
const Step = Object.assign(Layout, {
	Section,
	Header,
	Body,
	Footer: FooterCompound,
	Counter
});

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