/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e634e55 | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { useEvent } from "../../../_internal/hooks/use-event.js";
import { _Text } from "../../content/Text.js";
import { NotificationActionInterceptorContext } from "./NotificationAction.js";
import { NotificationCard } from "./NotificationCard.js";
import { Divider } from "../../content/Divider.js";
import { formatRelativeTime } from "./format-relative-time.js";
import { usePersistentNotifications } from "./use-persistent-notifications.js";
import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/overlays/Notifications/PersistentNotificationsList.tsx
const MARK_READ_DELAY = 2e3;
/** Interval (ms) at which relative timestamps refresh while the list is mounted. */
const TIMESTAMP_REFRESH_INTERVAL = 1e4;
const ListContainer = tasty({
	qa: "PersistentNotificationsList",
	role: "log",
	"aria-label": "Notifications",
	styles: {
		display: "flex",
		flow: "column"
	}
});
const EmptyStateContainer = tasty({ styles: {
	display: "flex",
	placeItems: "center",
	placeContent: "center",
	padding: "4x",
	color: "#dark.5",
	preset: "t3"
} });
/**
* Standardized rendering for archived/persistent notifications.
* Always reads items from the notification context.
* Composable with app-specific shells (popover, dialog, page section).
*
* Marks all items as read after being visible for 2 seconds.
* Relative timestamps refresh every 10 seconds while the list is mounted.
*
* Items are always dismissible. Dismissing an item removes it from the
* persistent list and marks its ID as "fully dismissed" — subsequent triggers
* with the same ID will be completely ignored (no overlay, no re-archival).
*
* @example
* ```tsx
* <PersistentNotificationsList emptyState="No notifications" />
* ```
*/
function PersistentNotificationsList({ onDismissItem, onAction, emptyState }) {
	const { items, remove, markAllAsRead } = usePersistentNotifications();
	const handleDismiss = useEvent((item) => {
		remove(item.id);
		onDismissItem?.(item);
	});
	const markReadTimerRef = useRef(null);
	const [, setTick] = useState(0);
	useEffect(() => {
		if (items.length === 0) return;
		const interval = setInterval(() => {
			setTick((t) => t + 1);
		}, TIMESTAMP_REFRESH_INTERVAL);
		return () => clearInterval(interval);
	}, [items.length]);
	useEffect(() => {
		if (!items.some((i) => !i.isRead)) return;
		markReadTimerRef.current = setTimeout(() => {
			markAllAsRead();
		}, MARK_READ_DELAY);
		return () => {
			if (markReadTimerRef.current) {
				clearTimeout(markReadTimerRef.current);
				markReadTimerRef.current = null;
			}
		};
	}, [markAllAsRead, items]);
	if (items.length === 0) return /* @__PURE__ */ jsx(ListContainer, { children: /* @__PURE__ */ jsx(EmptyStateContainer, { children: emptyState ?? "No notifications" }) });
	return /* @__PURE__ */ jsx(NotificationActionInterceptorContext.Provider, {
		value: onAction ?? null,
		children: /* @__PURE__ */ jsx(ListContainer, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(PersistentNotificationListItem, {
			item,
			onDismiss: handleDismiss
		})] }, String(item.id))) })
	});
}
function PersistentNotificationListItem({ item, onDismiss }) {
	const suffix = /* @__PURE__ */ jsx(_Text, {
		opacity: .5,
		preset: "c2",
		children: formatRelativeTime(item.createdAt)
	});
	const handleDismiss = useEvent((_id, _reason) => {
		onDismiss?.(item);
	});
	const parentInterceptor = useContext(NotificationActionInterceptorContext);
	const handleItemAction = useEvent(() => {
		parentInterceptor?.();
	});
	return /* @__PURE__ */ jsx(NotificationActionInterceptorContext.Provider, {
		value: handleItemAction,
		children: /* @__PURE__ */ jsx(NotificationCard, {
			qa: "PersistentNotificationItem",
			theme: item.theme,
			title: item.title,
			description: item.description,
			icon: item.icon,
			actions: item.actions,
			isDismissible: !!onDismiss,
			elevated: false,
			notificationId: item.id,
			suffix,
			onDismiss: onDismiss ? handleDismiss : void 0
		})
	});
}

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