import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { useOAuthConsentContext } from "../../contexts/components/OAuthConsent.js";
import lock_dotted_circle_default from "../../icons/lock-dotted-circle.js";
import { colors } from "../../utils/colors/index.js";
import { common } from "../../styledSystem/common.js";
import { Alert } from "../../primitives/Alert.js";
import { Textarea } from "../../primitives/Input.js";
import { withCardStateProvider } from "../../elements/contexts/index.js";
import { Flow } from "../../customizables/Flow.js";
import { Box, Button, Flex, Grid, Icon, Text } from "../../customizables/index.js";
import { Modal } from "../../elements/Modal.js";
import { ApplicationLogo } from "../../elements/ApplicationLogo.js";
import { Card } from "../../elements/Card/index.js";
import { Header } from "../../elements/Header.js";
import { Tooltip } from "../../elements/Tooltip.js";
import { useState } from "react";
import { useUser } from "@clerk/shared/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/OAuthConsent/OAuthConsent.tsx
const OFFLINE_ACCESS_SCOPE = "offline_access";
function OAuthConsentInternal() {
	const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, oAuthApplicationUrl, redirectUrl, onDeny, onAllow } = useOAuthConsentContext();
	const { user } = useUser();
	const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
	const [isUriModalOpen, setIsUriModalOpen] = useState(false);
	const primaryIdentifier = user?.primaryEmailAddress?.emailAddress || user?.primaryPhoneNumber?.phoneNumber;
	const displayedScopes = (scopes || []).filter((item) => item.scope !== OFFLINE_ACCESS_SCOPE);
	const hasOfflineAccess = (scopes || []).some((item) => item.scope === OFFLINE_ACCESS_SCOPE);
	function getRootDomain() {
		try {
			const { hostname } = new URL(redirectUrl);
			return hostname.split(".").slice(-2).join(".");
		} catch {
			return "";
		}
	}
	return /* @__PURE__ */ jsxs(Flow.Root, {
		flow: "oauthConsent",
		children: [/* @__PURE__ */ jsxs(Card.Root, { children: [/* @__PURE__ */ jsxs(Card.Content, { children: [
			/* @__PURE__ */ jsxs(Header.Root, { children: [
				oAuthApplicationLogoUrl && logoImageUrl && /* @__PURE__ */ jsxs(ConnectionHeader, { children: [
					/* @__PURE__ */ jsx(ConnectionItem, {
						justify: "end",
						children: /* @__PURE__ */ jsx(ApplicationLogo, {
							src: oAuthApplicationLogoUrl,
							alt: oAuthApplicationName,
							href: oAuthApplicationUrl,
							isExternal: true
						})
					}),
					/* @__PURE__ */ jsx(ConnectionSeparator, {}),
					/* @__PURE__ */ jsx(ConnectionItem, {
						justify: "start",
						children: /* @__PURE__ */ jsx(ApplicationLogo, {})
					})
				] }),
				oAuthApplicationLogoUrl && !logoImageUrl && /* @__PURE__ */ jsx(ConnectionHeader, { children: /* @__PURE__ */ jsxs(Box, {
					sx: { position: "relative" },
					children: [/* @__PURE__ */ jsx(ApplicationLogo, {
						src: oAuthApplicationLogoUrl,
						alt: oAuthApplicationName,
						href: oAuthApplicationUrl,
						isExternal: true
					}), /* @__PURE__ */ jsx(ConnectionIcon, {
						size: "sm",
						sx: (t) => ({
							position: "absolute",
							bottom: `calc(${t.space.$3} * -1)`,
							right: `calc(${t.space.$3} * -1)`
						})
					})]
				}) }),
				!oAuthApplicationLogoUrl && logoImageUrl && /* @__PURE__ */ jsxs(ConnectionHeader, { children: [
					/* @__PURE__ */ jsx(ConnectionItem, {
						justify: "end",
						children: /* @__PURE__ */ jsx(ConnectionIcon, {})
					}),
					/* @__PURE__ */ jsx(ConnectionSeparator, {}),
					/* @__PURE__ */ jsx(ConnectionItem, {
						justify: "start",
						children: /* @__PURE__ */ jsx(ApplicationLogo, {})
					})
				] }),
				!oAuthApplicationLogoUrl && !logoImageUrl && /* @__PURE__ */ jsx(ConnectionHeader, { children: /* @__PURE__ */ jsx(ConnectionIcon, {}) }),
				/* @__PURE__ */ jsx(Header.Title, { localizationKey: oAuthApplicationName }),
				/* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: `wants to access ${applicationName} on behalf of ${primaryIdentifier}` })
			] }),
			/* @__PURE__ */ jsxs(Box, {
				sx: (t) => ({
					textAlign: "left",
					borderWidth: t.borderWidths.$normal,
					borderStyle: t.borderStyles.$solid,
					borderColor: t.colors.$borderAlpha100,
					borderRadius: t.radii.$lg,
					overflow: "hidden"
				}),
				children: [/* @__PURE__ */ jsx(Box, {
					sx: (t) => ({
						padding: t.space.$3,
						background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50)
					}),
					children: /* @__PURE__ */ jsx(Text, {
						variant: "subtitle",
						localizationKey: `This will allow ${oAuthApplicationName} access to:`
					})
				}), /* @__PURE__ */ jsx(Box, {
					as: "ul",
					sx: (t) => ({
						margin: t.sizes.$none,
						padding: t.sizes.$none
					}),
					children: displayedScopes.map((item) => /* @__PURE__ */ jsx(Box, {
						sx: (t) => ({
							display: "flex",
							alignItems: "baseline",
							paddingInline: t.space.$3,
							paddingBlock: t.space.$2,
							borderTopWidth: t.borderWidths.$normal,
							borderTopStyle: t.borderStyles.$solid,
							borderTopColor: t.colors.$borderAlpha100,
							"&::before": {
								content: "\"\"",
								display: "inline-block",
								width: t.space.$1,
								height: t.space.$1,
								background: t.colors.$colorMutedForeground,
								borderRadius: t.radii.$circle,
								transform: "translateY(-0.1875rem)",
								marginRight: t.space.$2,
								flexShrink: 0
							}
						}),
						as: "li",
						children: /* @__PURE__ */ jsx(Text, {
							variant: "subtitle",
							localizationKey: item.description || item.scope || ""
						})
					}, item.scope))
				})]
			}),
			/* @__PURE__ */ jsx(Alert, {
				colorScheme: "warning",
				children: /* @__PURE__ */ jsxs(Text, {
					colorScheme: "warning",
					variant: "caption",
					children: [
						"Make sure that you trust ",
						oAuthApplicationName,
						" ",
						"",
						/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsxs(Text, {
							as: "span",
							role: "button",
							tabIndex: 0,
							"aria-label": "View full URL",
							variant: "caption",
							sx: {
								textDecoration: "underline",
								textDecorationStyle: "dotted",
								cursor: "pointer",
								outline: "none",
								display: "inline-block"
							},
							onClick: () => setIsUriModalOpen(true),
							children: [
								"(",
								getRootDomain(),
								")"
							]
						}) }), /* @__PURE__ */ jsx(Tooltip.Content, { text: `View full URL` })] }),
						"",
						". You may be sharing sensitive data with this site or app."
					]
				})
			}),
			/* @__PURE__ */ jsxs(Grid, {
				columns: 2,
				gap: 3,
				children: [
					/* @__PURE__ */ jsx(Button, {
						colorScheme: "secondary",
						variant: "outline",
						localizationKey: "Deny",
						onClick: onDeny
					}),
					/* @__PURE__ */ jsx(Button, {
						localizationKey: "Allow",
						onClick: onAllow
					}),
					/* @__PURE__ */ jsxs(Text, {
						sx: { gridColumn: "span 2" },
						colorScheme: "secondary",
						variant: "caption",
						children: [
							"If you allow access, this app will redirect you to",
							" ",
							/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Text, {
								as: "span",
								role: "button",
								tabIndex: 0,
								"aria-label": "View full URL",
								variant: "caption",
								sx: {
									textDecoration: "underline",
									textDecorationStyle: "dotted",
									cursor: "pointer",
									outline: "none",
									display: "inline-block"
								},
								onClick: () => setIsUriModalOpen(true),
								children: getRootDomain()
							}) }), /* @__PURE__ */ jsx(Tooltip.Content, { text: `View full URL` })] }),
							".",
							hasOfflineAccess && " You'll stay signed in until you sign out or revoke access."
						]
					})
				]
			})
		] }), /* @__PURE__ */ jsx(Card.Footer, {})] }), /* @__PURE__ */ jsx(RedirectUriModal, {
			isOpen: isUriModalOpen,
			onOpen: () => setIsUriModalOpen(true),
			onClose: () => setIsUriModalOpen(false),
			redirectUri: redirectUrl,
			oAuthApplicationName
		})]
	});
}
function RedirectUriModal({ onOpen, onClose, isOpen, redirectUri, oAuthApplicationName }) {
	if (!isOpen) return null;
	return /* @__PURE__ */ jsx(Modal, {
		handleOpen: onOpen,
		handleClose: onClose,
		children: /* @__PURE__ */ jsx(Card.Root, { children: /* @__PURE__ */ jsxs(Card.Content, { children: [/* @__PURE__ */ jsxs(Header.Root, { children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: `Redirect URL` }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: `Make sure you trust ${oAuthApplicationName} and that this URL belongs to ${oAuthApplicationName}.` })] }), /* @__PURE__ */ jsx(Textarea, {
			style: { maxHeight: "none" },
			cols: 50,
			rows: 6,
			defaultValue: redirectUri,
			readOnly: true
		})] }) })
	});
}
function ConnectionHeader({ children }) {
	return /* @__PURE__ */ jsx(Flex, {
		justify: "center",
		align: "center",
		gap: 4,
		sx: (t) => ({ marginBlockEnd: t.space.$6 }),
		children
	});
}
function ConnectionItem({ children, sx,...props }) {
	return /* @__PURE__ */ jsx(Flex, {
		...props,
		sx: [{ flex: 1 }, sx],
		children
	});
}
function ConnectionIcon({ size = "md", sx }) {
	const scale = (t) => {
		const value = size === "sm" ? t.space.$6 : t.space.$12;
		return {
			width: value,
			height: value
		};
	};
	return /* @__PURE__ */ jsx(Box, {
		sx: (t) => [
			{
				background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50),
				borderRadius: t.radii.$circle,
				borderWidth: t.borderWidths.$normal,
				borderStyle: t.borderStyles.$solid,
				borderColor: t.colors.$borderAlpha100,
				display: "flex",
				alignItems: "center",
				justifyContent: "center"
			},
			scale,
			sx
		],
		children: /* @__PURE__ */ jsx(Icon, {
			icon: lock_dotted_circle_default,
			sx: (t) => ({ color: t.colors.$primary500 })
		})
	});
}
function ConnectionSeparator() {
	return /* @__PURE__ */ jsx(Box, {
		as: "svg",
		fill: "none",
		viewBox: "0 0 16 2",
		height: 2,
		"aria-hidden": true,
		sx: (t) => ({ color: t.colors.$colorMutedForeground }),
		children: /* @__PURE__ */ jsx("path", {
			stroke: "currentColor",
			strokeDasharray: "0.1 4",
			strokeLinecap: "round",
			strokeWidth: "2",
			d: "M1 1h14"
		})
	});
}
const OAuthConsent = withCardStateProvider(OAuthConsentInternal);

//#endregion
export { OAuthConsent, OAuthConsentInternal };
//# sourceMappingURL=OAuthConsent.js.map