/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { useId as useId$2 } from "../../../../utils/react/useId.js";
import { mergeProps as mergeProps$1 } from "../../../../utils/react/mergeProps.js";
import { ClearSlots } from "../../../../utils/react/Slots.js";
import { useEvent } from "../../../../_internal/hooks/use-event.js";
import { useTimer } from "../../../../_internal/hooks/use-timer/use-timer.js";
import { useNotificationsDialogContext } from "../Dialog/NotificationsDialogContext.js";
import { NotificationCloseButton } from "./NotificationCloseButton.js";
import { NotificationDescription } from "./NotificationDescription.js";
import { NotificationFooter } from "./NotificationFooter.js";
import { NotificationHeader } from "./NotificationHeader.js";
import { NotificationIcon } from "./NotificationIcon.js";
import { NotificationProvider } from "./NotificationProvider.js";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useFocusRing, useHover } from "react-aria";

//#region src/components/overlays/NewNotifications/NotificationView/NotificationView.tsx
const NotificationContainer = tasty({ styles: {
	boxSizing: "border-box",
	position: "relative",
	display: "grid",
	width: "100%",
	padding: "0.5x 0.5x 1.5x 1.5x",
	gridAreas: `
      ".    . .           .      close"
      "icon . header      .      close"
      "icon . description .      close"
      ".    . footer      footer footer"
    `,
	gridColumns: "min-content 1x minmax(0, auto) 1x minmax(0, min-content)",
	gridRows: "1x minmax(0, auto) minmax(0, auto) minmax(0, auto)",
	fill: "#white",
	radius: "1cr",
	boxShadow: {
		"": "0 0 0 4bw #purple-04.0 inset",
		focused: "0 0 0 4bw #purple-04 inset"
	},
	outline: 0,
	border: {
		"": "#border",
		"type=success": "#success.4",
		"type=danger": "#danger.4",
		"type=attention": "#border",
		"inside-dialog": false
	}
} });
/**
* @internal This component is unstable and is a subject to change.
*/
const NotificationView = forwardRef(function NotificationView(props, ref) {
	const { onClose, actions, header, icon, description, id, styles, type = "attention", isDismissible = true, duration = null, attributes = {}, qa = "notification", timer: propsTimer, onDismiss } = props;
	const labelID = useId$2();
	const descriptionID = useId$2();
	const insideNotificationsDialog = useNotificationsDialogContext();
	const onCloseEvent = useEvent(() => {
		onClose?.();
	});
	const onDismissEvent = useEvent(() => {
		if (isDismissible) onDismiss?.();
	});
	const { hoverProps, isHovered } = useHover({});
	const { isFocusVisible, focusProps } = useFocusRing({ within: true });
	useTimer({
		timer: propsTimer,
		delay: duration,
		callback: onDismissEvent,
		isDisabled: isFocusVisible || isHovered || !isDismissible
	});
	return /* @__PURE__ */ jsx(ClearSlots, { children: /* @__PURE__ */ jsx(NotificationProvider, {
		onClose,
		children: /* @__PURE__ */ jsxs(NotificationContainer, {
			...mergeProps$1(attributes, hoverProps, focusProps),
			ref,
			styles,
			"data-id": id,
			"data-qa": qa,
			"data-type": type,
			"aria-labelledby": labelID,
			"aria-describedby": descriptionID,
			mods: {
				focused: isFocusVisible,
				"is-dismissible": isDismissible,
				"inside-dialog": insideNotificationsDialog
			},
			children: [
				/* @__PURE__ */ jsx(NotificationIcon, {
					icon,
					type
				}),
				/* @__PURE__ */ jsx(NotificationHeader, {
					header,
					id: labelID
				}),
				description && /* @__PURE__ */ jsx(NotificationDescription, {
					description,
					id: descriptionID
				}),
				/* @__PURE__ */ jsx(NotificationFooter, {
					hasDescription: !!description,
					actions,
					onClose: onCloseEvent,
					onDismiss: onDismissEvent
				}),
				isDismissible && /* @__PURE__ */ jsx(NotificationCloseButton, { onPress: onDismissEvent })
			]
		})
	}) });
});

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