/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { mergeProps as mergeProps$1 } from "../../../../utils/react/mergeProps.js";
import { useEvent } from "../../../../_internal/hooks/use-event.js";
import { useChainedCallback } from "../../../../_internal/hooks/use-chained-callback.js";
import { useNotificationsList } from "../hooks/use-notifications-list.js";
import { FloatingNotification } from "./FloatingNotification.js";
import { TransitionComponent } from "./TransitionComponent.js";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { useFocusRing, useHover } from "react-aria";
import { focusSafely } from "@react-aria/focus";
import { Item } from "react-stately";
import { TransitionGroup } from "react-transition-group";

//#region src/components/overlays/NewNotifications/Bar/NotificationsBar.tsx
const NotificationsContainer = tasty({ styles: {
	boxSizing: "border-box",
	position: "fixed",
	bottom: "env(safe-area-inset-bottom, 0)",
	right: "env(safe-area-inset-right, 0)",
	display: "flex",
	flexDirection: "column-reverse",
	width: "auto 100% 50x",
	height: "100dvh max",
	padding: "2x",
	gap: "1x",
	zIndex: 2147483647,
	overflow: "hidden",
	isolation: "isolate",
	pointerEvents: "none"
} });
/**
* @internal Do not use it
*/
function NotificationsBar(props) {
	const { items, children, onRemoveNotification, onDismissNotification, limit = 5 } = props;
	const ref = useRef(null);
	const [realLimit, setRealLimit] = useState(limit + 1);
	const lastShownIdRef = useRef(null);
	const { listProps, state } = useNotificationsList({
		items,
		children,
		ref
	});
	const { hoverProps, isHovered } = useHover({});
	const { focusProps, isFocusVisible } = useFocusRing({ within: true });
	const chainedOnRemoveNotification = useChainedCallback(onRemoveNotification, useEvent((key) => {
		const nextKey = state.collection.getKeyBefore(key.toString()) ?? state.collection.getKeyAfter(key.toString()) ?? state.collection.getLastKey();
		const elementToFocus = ref.current?.querySelector(`[data-id="${nextKey}"]`);
		if (elementToFocus) focusSafely(elementToFocus);
	}));
	let collection = [...state.collection].reverse();
	const collectionLength = collection.length;
	const lastShownNotificationIndex = collection.findIndex((notification) => notification.props.id === lastShownIdRef.current);
	if (lastShownNotificationIndex !== -1) collection = collection.slice(0, lastShownNotificationIndex);
	/**
	* Handy hack to improve animations if the limit is reached.
	*/
	useLayoutEffect(() => {
		setRealLimit(limit + 1);
	}, [collectionLength]);
	useLayoutEffect(() => {
		if (realLimit > limit) setRealLimit(limit);
	}, [realLimit]);
	collection.slice(realLimit).forEach((notification) => {
		lastShownIdRef.current = notification.props.id;
	});
	useEffect(() => {
		if (lastShownIdRef.current) {
			onDismissNotification(lastShownIdRef.current);
			onRemoveNotification(lastShownIdRef.current);
			collection.find((notification) => notification.props.id === lastShownIdRef.current)?.props.onDismiss?.();
		}
	}, [lastShownIdRef.current]);
	return /* @__PURE__ */ jsx(NotificationsContainer, {
		ref,
		qa: "NotificationsBar",
		role: "region",
		"aria-live": "polite",
		...mergeProps$1(listProps, hoverProps, focusProps),
		children: /* @__PURE__ */ jsx(TransitionGroup, {
			enter: true,
			exit: true,
			component: null,
			children: collection.slice(0, realLimit).map((notification) => /* @__PURE__ */ jsx(TransitionComponent, { children: /* @__PURE__ */ jsx(FloatingNotification, {
				isDisabledTimer: isHovered || isFocusVisible,
				id: notification.props.id,
				item: notification,
				state,
				onRemoveNotification: chainedOnRemoveNotification,
				onDismissNotification
			}) }, notification.props.id))
		})
	});
}
NotificationsBar.Item = Item;

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