import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import box_default from "../../icons/box.js";
import { useAppearance } from "../../customizables/AppearanceContext.js";
import { Box, Col, Flex, Icon, Text } from "../../customizables/index.js";
import { ApplicationLogo } from "../../elements/ApplicationLogo.js";
import { NavBar, NavbarContextProvider } from "../../elements/Navbar.js";
import React from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import { useOrganization } from "@clerk/shared/react/index";

//#region src/components/ConfigureSSO/ConfigureSSONavbar.tsx
const ConfigureSSONavbar = ({ children, contentRef }) => {
	const { parsedOptions } = useAppearance();
	const { organizationSettings, displayConfig: { applicationName, logoImageUrl } } = useEnvironment();
	return /* @__PURE__ */ jsxs(NavbarContextProvider, {
		contentRef,
		children: [/* @__PURE__ */ jsx(NavBar, {
			header: /* @__PURE__ */ jsxs(Flex, {
				align: "center",
				sx: (t) => ({
					gap: t.space.$2,
					padding: `${t.space.$none} ${t.space.$3}`,
					maxWidth: "100%"
				}),
				children: [Boolean(parsedOptions.logoImageUrl || logoImageUrl) ? /* @__PURE__ */ jsx(ApplicationLogo, { sx: (t) => ({
					width: t.space.$9,
					height: t.space.$9,
					borderRadius: t.radii.$md,
					overflow: "hidden"
				}) }) : /* @__PURE__ */ jsx(Box, {
					sx: (t) => ({
						width: t.space.$9,
						height: t.space.$9,
						flexShrink: 0,
						borderRadius: t.radii.$md,
						backgroundColor: t.colors.$primary500,
						color: t.colors.$colorPrimaryForeground,
						display: "flex",
						alignItems: "center",
						justifyContent: "center"
					}),
					"aria-hidden": true,
					children: /* @__PURE__ */ jsx(Icon, {
						icon: box_default,
						sx: (t) => ({
							width: t.sizes.$4,
							height: t.sizes.$4
						})
					})
				}), /* @__PURE__ */ jsxs(Col, {
					sx: { minWidth: 0 },
					children: [/* @__PURE__ */ jsx(Text, {
						as: "p",
						truncate: true,
						children: applicationName
					}), organizationSettings.enabled && /* @__PURE__ */ jsx(OrganizationSidebarSubtitle, {})]
				})]
			}),
			titleSx: (t) => ({ fontSize: t.fontSizes.$lg }),
			containerSx: {
				flexDirection: "column-reverse",
				flex: 0
			},
			title: localizationKeys("configureSSO.navbar.title"),
			routes: [],
			contentRef
		}), children]
	});
};
const OrganizationSidebarSubtitle = () => {
	const { organization } = useOrganization();
	if (!organization) return null;
	return /* @__PURE__ */ jsx(Text, {
		as: "span",
		truncate: true,
		sx: (t) => ({ color: t.colors.$colorMutedForeground }),
		children: organization?.name
	});
};

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