/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d4ad2ea | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { SlotProvider } from "../../../utils/react/Slots.js";
import { CloseIcon } from "../../../icons/CloseIcon.js";
import { useOpenTransitionContext } from "../Modal/OpenTransition.js";
import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
import { useDialogContext } from "./context.js";
import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, useEffect, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { DismissButton, FocusScope, useDialog, useMessageFormatter } from "react-aria";
import { useDOMRef } from "@react-spectrum/utils";
import { createFocusManager } from "@react-aria/focus";

//#region src/components/overlays/Dialog/Dialog.tsx
const STYLES_LIST = [
	...BASE_STYLES,
	...DIMENSION_STYLES,
	...BLOCK_STYLES,
	...FLOW_STYLES
];
const DialogElement = tasty({
	as: "section",
	styles: {
		display: "flex",
		flow: "column",
		fill: "#white",
		pointerEvents: "auto",
		outline: 0,
		position: {
			"": "relative",
			"type=panel": "absolute"
		},
		width: {
			"": "$min-dialog-size $dialog-size (100dvw - 8x)",
			"type=fullscreen": "(100dvw - 8x) (100dvw - 8x)",
			"type=fullscreenTakeover": "100dvw 100dvw",
			"type=panel": "auto"
		},
		height: {
			"": "auto (100dvh - 8x)",
			"type=fullscreen": "(100dvh - 8x) (100dvh - 8x)",
			"type=fullscreenTakeover | type=panel": "100dvh 100dvh",
			"type=popover": "initial initial (50dvh - 5x)"
		},
		gap: 0,
		border: {
			"": false,
			"type=popover": true
		},
		radius: {
			"": "1cr",
			"type=tray": "1cr top",
			"type=fullscreenTakeover": "0r"
		},
		shadow: {
			"": "$dialog-shadow",
			"type=popover | type=panel": "$shadow"
		},
		top: {
			"": false,
			"type=modal": "((50vh - 50%) / -3)",
			"type=panel": "auto"
		},
		"$dialog-title-padding-v": {
			"": "1.5x",
			"type=popover": "1x"
		},
		"$dialog-content-padding-v": {
			"": "1.5x",
			"type=popover": "1x"
		},
		"$dialog-padding-h": {
			"": "1.5x",
			"type=popover": "1x"
		},
		"$dialog-footer-v": {
			"": "1.5x",
			"type=popover": "1x"
		},
		"$dialog-content-gap": {
			"": "1.5x",
			"type=popover": "1x"
		}
	}
});
const CloseButton = tasty(_ItemButton, {
	qa: "ModalCloseButton",
	type: "neutral",
	styles: {
		position: "absolute",
		top: "1x",
		right: "1x"
	}
});
const sizeMap = {
	S: "small",
	M: "medium",
	L: "large"
};
const sizePxMap = {
	small: 360,
	medium: 479,
	large: 798
};
const intlMessages = { "en-US": {
	dismiss: "Dismiss",
	alert: "Alert"
} };
/**
* Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
* Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
*/
const Dialog = forwardRef(function Dialog(props, ref) {
	const isEntered = useOpenTransitionContext()?.transitionState === "entered";
	const context = useDialogContext();
	const content = useMemo(() => {
		return /* @__PURE__ */ jsx(DialogContent, {
			...props,
			ref
		}, "content");
	}, [props, ref]);
	const shouldContainFocus = isEntered && context.type !== "panel";
	const previouslyFocusedRef = useRef(null);
	useEffect(() => {
		if (context.isOpen) previouslyFocusedRef.current = document.activeElement;
	}, [context.isOpen]);
	useEffect(() => {
		if (!context.isOpen && previouslyFocusedRef.current) {
			const elementToFocus = previouslyFocusedRef.current;
			setTimeout(() => {
				elementToFocus?.focus?.();
			});
			previouslyFocusedRef.current = null;
		}
	}, [context.isOpen]);
	return /* @__PURE__ */ jsx(FocusScope, {
		restoreFocus: true,
		contain: shouldContainFocus,
		children: content
	});
});
const DialogContent = forwardRef(function DialogContent(props, ref) {
	let { type = "modal", ...contextProps } = useDialogContext();
	let { qa, children, size = "M", isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
	size = sizeMap[size.toUpperCase()] || size;
	const styles = extractStyles(otherProps, STYLES_LIST);
	let formatMessage = useMessageFormatter(intlMessages);
	let domRef = useDOMRef(ref);
	let { dialogProps, titleProps } = useDialog(mergeProps$1(contextProps, props), domRef);
	let dismissButton;
	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss });
	useEffect(() => {
		if (contextProps.isOpen) setTimeout(() => {
			if (domRef.current && !domRef.current.contains(document.activeElement)) {
				const priorityElement = domRef.current.querySelector("input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]");
				if (priorityElement) priorityElement.focus();
				else if (!createFocusManager(domRef).focusFirst({ tabbable: true })) domRef.current.focus();
			}
		});
	}, [contextProps.isOpen]);
	let slots = {
		title: {
			level: 2,
			preset: "h4",
			...titleProps
		},
		content: { styles: {
			flexGrow: 1,
			padding: "$dialog-content-padding-v $dialog-padding-h",
			gap: "$dialog-content-gap",
			height: {
				"": "max (100% - (2 * $dialog-content-padding-v))",
				":last-child": "max (100% - $dialog-content-padding-v)"
			}
		} },
		header: {
			ellipsis: true,
			styles: {
				display: "flex",
				flow: "row",
				gap: "1x",
				placeItems: "center stretch",
				placeContent: "space-between",
				padding: `$dialog-title-padding-v ${isDismissable ? "($dialog-padding-h + 4x)" : "$dialog-padding-h"} $dialog-title-padding-v $dialog-padding-h`,
				border: "bottom"
			}
		},
		footer: { styles: {
			display: "flex",
			gap: "1x",
			flow: "row-reverse",
			placeItems: "baseline stretch",
			placeContent: "space-between",
			padding: "$dialog-footer-v $dialog-padding-h"
		} },
		buttonGroup: { styles: { flow: "row-reverse" } }
	};
	return /* @__PURE__ */ jsxs(DialogElement, {
		ref: domRef,
		"data-id": "Dialog",
		"data-qa": qa || "Dialog",
		styles,
		as: "section",
		...dialogProps,
		mods: { dismissable: isDismissable },
		style: {
			"--dialog-size": `${sizePxMap[size] || sizePxMap.small}px`,
			...style
		},
		"data-type": type,
		"data-size": size,
		children: [dismissButton, /* @__PURE__ */ jsxs(SlotProvider, {
			slots,
			children: [isDismissable && /* @__PURE__ */ jsx(CloseButton, {
				icon: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { size: 20 }),
				label: formatMessage("dismiss"),
				onPress: () => onDismiss && onDismiss()
			}), children]
		})]
	});
});

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