import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { Select } from '../../../ui/components/data-entry/select/select.js';
export const EventLogCard = ({ eventLogs, clearEventLogs }) => {
    const [newEventIds, setNewEventIds] = useState(new Set());
    const [selectedFilters, setSelectedFilters] = useState([]);
    // Get unique event types from the logs
    const availableEventTypes = useMemo(() => {
        const types = new Set(eventLogs.map((log) => log.type));
        return Array.from(types)
            .sort()
            .map((type) => ({
            value: type,
            label: type,
        }));
    }, [eventLogs]);
    // Filter events based on selected filters
    const filteredEventLogs = useMemo(() => {
        if (selectedFilters.length === 0) {
            return eventLogs;
        }
        return eventLogs.filter((event) => selectedFilters.includes(event.type));
    }, [eventLogs, selectedFilters]);
    const handleFilterChange = (value) => {
        setSelectedFilters(Array.isArray(value) ? value : []);
    };
    const clearFilters = () => {
        setSelectedFilters([]);
    };
    // Track when new events are added
    useEffect(() => {
        if (eventLogs.length === 0) {
            setNewEventIds(new Set());
            return;
        }
        // Get the most recent event (first in array since new events are prepended)
        const latestEvent = eventLogs[0];
        setNewEventIds((prev) => new Set([...prev, latestEvent.id]));
        // Remove the "new" status after animation completes
        const timer = setTimeout(() => {
            setNewEventIds((prev) => {
                const updated = new Set(prev);
                updated.delete(latestEvent.id);
                return updated;
            });
        }, 2000); // Remove effect after 2 seconds
        return () => {
            clearTimeout(timer);
        };
    }, [eventLogs]);
    return (_jsx("div", { className: "w-96 max-h-[650px] flex flex-col", children: _jsx("div", { className: "sticky top-4 flex flex-col h-full", children: _jsxs("div", { className: "bg-white border border-gray-300 rounded-lg shadow-sm flex flex-col h-full", children: [_jsxs("div", { className: "p-4 border-b border-gray-200 flex justify-between items-center flex-shrink-0", children: [_jsx("h3", { className: "text-md font-semibold text-gray-900", children: "Event Logs" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: clearFilters, className: "text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded border border-gray-300 hover:bg-gray-50", disabled: selectedFilters.length === 0, children: "Clear Filters" }), _jsx("button", { onClick: clearEventLogs, className: "text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded border border-gray-300 hover:bg-gray-50", children: "Clear" })] })] }), availableEventTypes.length > 0 && (_jsxs("div", { className: "px-3 py-2 border-b border-gray-200 bg-gray-50", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("div", { className: "text-xs font-medium text-gray-700", children: "Filter by event type:" }), selectedFilters.length > 0 && (_jsxs("div", { className: "text-xs text-gray-500", children: [filteredEventLogs.length, "/", eventLogs.length] }))] }), _jsx(Select, { options: availableEventTypes, multiple: true, value: selectedFilters, onChange: handleFilterChange, placeholder: "Select event types...", className: "h-8" })] })), _jsx("div", { className: "flex-1 overflow-y-auto", children: eventLogs.length === 0 ? (_jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No events logged yet. Interact with the table to see events." })) : filteredEventLogs.length === 0 ? (_jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No events match the selected filters." })) : (_jsx("div", { className: "p-2 space-y-2", children: filteredEventLogs.map((event) => {
                                const isNew = newEventIds.has(event.id);
                                return (_jsxs("div", { className: `p-3 rounded-md border text-xs transition-all duration-500 ease-out ${isNew ? 'bg-blue-100 border-blue-300 animate-pulse' : 'bg-gray-50 border-gray-200'}`, children: [_jsxs("div", { className: "flex justify-between items-start mb-1", children: [_jsx("span", { className: "font-semibold text-blue-600", children: event.type }), _jsx("span", { className: "text-gray-500", children: event.timestamp })] }), _jsx("div", { className: "text-gray-700 mb-2", children: event.details }), event.data && (_jsxs("details", { className: "text-gray-600", children: [_jsx("summary", { className: "cursor-pointer text-xs text-gray-500 hover:text-gray-700", children: "View data" }), _jsx("pre", { className: "mt-1 p-2 bg-white rounded border text-xs overflow-x-auto", children: JSON.stringify(event.data, null, 2) })] }))] }, `${event.id}-${event.type}`));
                            }) })) })] }) }) }));
};
//# sourceMappingURL=event-log-card.js.map