/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { useEvent } from "../../../../_internal/hooks/use-event.js";
import { useChainedCallback } from "../../../../_internal/hooks/use-chained-callback.js";
import { useTimer } from "../../../../_internal/hooks/use-timer/use-timer.js";
import { useNotificationListItem } from "../hooks/use-notification-list-item.js";
import { NotificationView } from "../NotificationView/NotificationView.js";
import { memo, useRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/overlays/NewNotifications/Bar/FloatingNotification.tsx
const NotificationContainer = tasty({ styles: {
	overflow: "hidden",
	radius: "1cr",
	shadow: true,
	pointerEvents: "auto"
} });
/**
* @internal This component is unstable and must not be used outside of `NotificationsBar`.
*/
const FloatingNotification = memo(function FloatingNotification(props) {
	const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification } = props;
	const { props: notificationProps, key } = item;
	const ref = useRef(null);
	const onCloseEvent = useChainedCallback(() => onRemoveNotification(id), notificationProps.onClose);
	const chainedOnDismiss = useChainedCallback(() => onDismissNotification(id), () => onRemoveNotification(id), notificationProps.onDismiss);
	const onKeyDown = useEvent(({ key }) => {
		if (notificationProps.isDismissible === false) return;
		if ([
			"Delete",
			"Backspace",
			"Escape"
		].includes(key)) chainedOnDismiss();
	});
	const { itemProps } = useNotificationListItem({
		key,
		ref,
		state
	});
	const { timer } = useTimer({
		callback: chainedOnDismiss,
		delay: notificationProps.duration,
		isDisabled: isDisabledTimer
	});
	return /* @__PURE__ */ jsx(NotificationContainer, { children: /* @__PURE__ */ jsx(NotificationView, {
		ref,
		...notificationProps,
		timer,
		attributes: {
			...itemProps,
			onKeyDown,
			role: "status",
			"aria-atomic": "true"
		},
		qa: "FloatingNotification",
		onDismiss: chainedOnDismiss,
		onClose: onCloseEvent
	}) });
});

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