'use client';
import { jsx as _jsx } from "react/jsx-runtime";
// packages/ui/src/components/layout/components/Notifications.tsx
/**
 * @fileoverview Notifications component for layout system
 * @description Notification bell with dropdown for displaying user notifications
 *
 * This component provides a notification system for the layout header with
 * badge counts, dropdown display, and proper accessibility. It integrates
 * with notification stores and provides real-time updates.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 * @example
 * ```tsx
 * <Notifications
 * count={5}
 * notifications={notifications}
 * onNotificationClick={markAsRead}
 * />
 * ```
 */
// packages/core/ui/src/components/layout/components/Notifications.tsx
import { Bell } from 'lucide-react';
import { useMemo, useEffect, useRef } from 'react';
import { Button, cn, toast, Stack } from '@donotdev/components';
/**
 * Size mappings for consistent notification component sizing using CSS variables
 */
const SIZE_VARIANTS = {
    sm: {
        button: { width: 'var(--icon-md)', height: 'var(--icon-md)' },
        icon: { width: 'var(--icon-md)', height: 'var(--icon-md)' },
        badge: {
            width: 'var(--icon-md)',
            height: 'var(--icon-md)',
            fontSize: 'var(--font-size-xs)',
        },
    },
    md: {
        button: { width: 'var(--touch-target)', height: 'var(--touch-target)' },
        icon: { width: 'var(--icon-md)', height: 'var(--icon-md)' },
        badge: {
            width: 'var(--icon-md)',
            height: 'var(--icon-md)',
            fontSize: 'var(--font-size-xs)',
        },
    },
    lg: {
        button: { width: 'var(--touch-target)', height: 'var(--touch-target)' },
        icon: { width: 'var(--icon-touch)', height: 'var(--icon-touch)' },
        badge: {
            width: 'var(--icon-touch)',
            height: 'var(--icon-touch)',
            fontSize: 'var(--font-size-sm)',
        },
    },
};
/**
 * Notifications component - notification bell with dropdown
 *
 * Features:
 * - Badge count display with proper formatting
 * - Dropdown notification list
 * - Real-time notification updates
 * - Mark as read functionality
 * - Different notification types with styling
 * - Responsive design
 * - Keyboard navigation support
 * - Loading states
 * - Empty states
 * - Time formatting for timestamps
 *
 * This component provides a complete notification system that can be
 * easily integrated into any layout header or navigation area.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 * @param props - Notifications component props
 * @returns React component
 *
 * @example
 * ```tsx
 * // Basic usage
 * <Notifications count={3} />
 *
 * // With full notification data
 * <Notifications
 * notifications={[
 * {
 * id: '1',
 * title: 'New message',
 * message: 'You have a new message from John',
 * type: 'info',
 * timestamp: new Date(),
 * }
 * ]}
 * onNotificationClick={handleNotificationClick}
 * />
 *
 * // Custom styling and behavior
 * <Notifications
 * count={notifications.filter(n => !n.read).length}
 * maxVisible={5}
 * onMarkAllRead={markAllAsRead}
 *
 * />
 * ```
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const Notifications = ({ notifications = [], count = 0, loading = false, onNotificationClick, onDropdownOpen, className, maxVisible = 10, alwaysShow = false, size = 'md', disabled = false, }) => {
    const sizeVariant = SIZE_VARIANTS[size];
    const shownNotificationIds = useRef(new Set());
    // Calculate display count (format large numbers)
    const displayCount = useMemo(() => {
        if (count === 0)
            return null;
        if (count > 99)
            return '99+';
        return count.toString();
    }, [count]);
    // Show component if there are notifications or alwaysShow is true
    const shouldShow = count > 0 || alwaysShow;
    // Show new notifications as infinite toasts
    useEffect(() => {
        notifications.forEach((notification) => {
            if (!shownNotificationIds.current.has(notification.id)) {
                shownNotificationIds.current.add(notification.id);
                const toastType = notification.type === 'error'
                    ? 'error'
                    : notification.type === 'warning'
                        ? 'warning'
                        : notification.type === 'success'
                            ? 'success'
                            : 'info';
                toast({
                    title: notification.title,
                    description: notification.message,
                    toastType: toastType,
                    duration: 0, // Infinite/persistent
                    onDismiss: () => {
                        shownNotificationIds.current.delete(notification.id);
                        if (onNotificationClick) {
                            onNotificationClick(notification);
                        }
                    },
                });
            }
        });
    }, [notifications, onNotificationClick]);
    if (!shouldShow) {
        return null;
    }
    return (_jsx("div", { className: cn(className), style: { position: 'relative' }, children: _jsx(Button, { disabled: disabled, style: {
                ...sizeVariant.button,
                position: 'relative',
            }, onClick: () => {
                onDropdownOpen?.();
            }, onFocus: (e) => {
                e.currentTarget.style.outline = '2px solid var(--ring)';
                e.currentTarget.style.outlineOffset = '2px';
            }, onBlur: (e) => {
                e.currentTarget.style.outline = 'none';
            }, "aria-label": `${count} notification${count !== 1 ? 's' : ''}`, icon: Bell, children: displayCount && (_jsx(Stack, { align: "center", justify: "center", style: {
                    position: 'absolute',
                    top: '-0.25rem',
                    insetInlineEnd: '-0.25rem',
                    backgroundColor: 'var(--destructive)',
                    color: 'var(--destructive-foreground)',
                    borderRadius: 'var(--radius-full)',
                    fontWeight: 600,
                    lineHeight: 1,
                    minWidth: 0,
                    ...sizeVariant.badge,
                }, "aria-hidden": "true", children: displayCount })) }) }));
};
export default Notifications;
