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

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { useEvent } from '../../../_internal/index.js';
import { tasty } from '../../../tasty/index.js';
import { Text } from '../../content/Text.js';
import { formatRelativeTime } from './format-relative-time.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',
        gap: '.5x',
    },
});
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.
 *
 * @example
 * ```tsx
 * <PersistentNotificationsList
 *   onDismissItem={(item) => remove(item.id)}
 *   emptyState="No notifications"
 * />
 * ```
 */
export function PersistentNotificationsList({ onDismissItem, emptyState, }) {
    const { items, markAllAsRead } = usePersistentNotifications();
    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(ListContainer, { children: items.map((item) => (_jsx(PersistentNotificationListItem, { item: item, onDismiss: onDismissItem }, 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);
    });
    return (_jsx(NotificationCard, { qa: "PersistentNotificationItem", theme: item.theme, title: item.title, description: item.description, icon: item.icon, actions: item.actions, isDismissible: !!onDismiss, notificationId: item.id, suffix: suffix, onDismiss: onDismiss ? handleDismiss : undefined }));
}

        