/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-22594b2
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useContext, useEffect, useRef, useState } from 'react';
import { useEvent } from '../../../_internal/index.js';
import { tasty } from '../../../tasty/index.js';
import { Divider } from '../../content/Divider.js';
import { Text } from '../../content/Text.js';
import { formatRelativeTime } from './format-relative-time.js';
import { NotificationActionInterceptorContext } from './NotificationAction.js';
import { NotificationCard } from './NotificationCard.js';
import { usePersistentNotifications } from './use-persistent-notifications.js';
// ─── Constants ───────────────────────────────────────────────────────
const MARK_READ_DELAY = 2000;
/** Interval (ms) at which relative timestamps refresh while the list is mounted. */
const TIMESTAMP_REFRESH_INTERVAL = 10_000;
// ─── Styled Components ──────────────────────────────────────────────
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',
    },
});
// ─── PersistentNotificationsList Component ───────────────────────────
/**
 * 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" />
 * ```
 */
export function PersistentNotificationsList({ onDismissItem, onAction, emptyState, }) {
    const { items, remove, markAllAsRead } = usePersistentNotifications();
    // Default dismiss handler removes the item from the persistent list (which
    // also marks the id as "fully dismissed" so it won't reappear).
    // If a consumer provides `onDismissItem`, it is called *after* the built-in removal.
    const handleDismiss = useEvent((item) => {
        remove(item.id);
        onDismissItem?.(item);
    });
    const markReadTimerRef = useRef(null);
    // Tick counter that increments every TIMESTAMP_REFRESH_INTERVAL to force
    // re-render so relative timestamps (e.g. "5 min ago") stay up to date.
    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]);
    // Mark all persistent notifications as read after a 2s delay.
    // Re-starts the timer whenever items change (e.g. new unread items arrive
    // while the list is already visible).
    useEffect(() => {
        const hasUnread = items.some((i) => !i.isRead);
        if (!hasUnread)
            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 (_jsx(ListContainer, { children: _jsx(EmptyStateContainer, { children: emptyState ?? 'No notifications' }) }));
    }
    return (_jsx(NotificationActionInterceptorContext.Provider, { value: onAction ?? null, children: _jsx(ListContainer, { children: items.map((item, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Divider, {}), _jsx(PersistentNotificationListItem, { item: item, onDismiss: handleDismiss })] }, String(item.id)))) }) }));
}
function PersistentNotificationListItem({ item, onDismiss, }) {
    const suffix = (_jsx(Text, { opacity: 0.5, preset: "c2", children: formatRelativeTime(item.createdAt) }));
    // useEvent keeps the callback stable across re-renders regardless of
    // item reference changes (avoids unnecessary NotificationCard re-renders).
    const handleDismiss = useEvent((_id, _reason) => {
        onDismiss?.(item);
    });
    const parentInterceptor = useContext(NotificationActionInterceptorContext);
    // Any action inside a persistent list item removes the item permanently
    // (including actions with closeOnPress={false} that wouldn't normally
    // trigger the dismiss flow). Chains with the list-level interceptor
    // (e.g. closing the parent popover).
    const handleItemAction = useEvent(() => {
        parentInterceptor?.();
        onDismiss?.(item);
    });
    return (_jsx(NotificationActionInterceptorContext.Provider, { value: handleItemAction, children: _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: suffix, onDismiss: onDismiss ? handleDismiss : undefined }) }));
}

        