//
// Copyright 2025 DXOS.org
//
import { formatDate } from 'date-fns/format';
import React, { useEffect, useMemo, useState } from 'react';
import { InvocationOutcome } from '@dxos/functions-runtime';
import { IconButton, Tag } from '@dxos/react-ui';
import { useFunctionNameResolver } from './hooks';
import { formatDuration } from './utils';
const InvocationColor = {
    [InvocationOutcome.PENDING]: 'blue',
    [InvocationOutcome.SUCCESS]: 'emerald',
    [InvocationOutcome.FAILURE]: 'red',
};
export const SpanSummary = ({ db, span, onClose }) => {
    const [currentDuration, setCurrentDuration] = useState(undefined);
    useEffect(() => {
        if (!span) {
            return;
        }
        const isInProgress = span.outcome === InvocationOutcome.PENDING;
        if (!isInProgress) {
            setCurrentDuration(span.duration);
            return;
        }
        setCurrentDuration(Date.now() - span.timestamp);
        const interval = setInterval(() => setCurrentDuration(Date.now() - span.timestamp), 100);
        return () => clearInterval(interval);
    }, [span]);
    const targetDxn = useMemo(() => span.invocationTarget?.dxn, [span.invocationTarget]);
    const resolver = useFunctionNameResolver({ db });
    const targetName = useMemo(() => resolver(targetDxn), [targetDxn, resolver]);
    const timestamp = useMemo(() => formatDate(span.timestamp, 'yyyy-MM-dd HH:mm:ss'), [span.timestamp]);
    const outcomeColor = useMemo(() => InvocationColor[span.outcome] ?? 'neutral', [span.outcome]);
    const outcomeLabel = useMemo(() => span.outcome.charAt(0).toUpperCase() + span.outcome.slice(1), [span.outcome]);
    return (React.createElement("div", { className: 'p-2 overflow-auto', role: 'none' },
        React.createElement("div", { className: 'is-flex justify-between items-start', role: 'none' },
            React.createElement("div", { className: 'is-full flex flex-row justify-between', role: 'none' },
                React.createElement("h3", { className: 'text-lg font-medium mb-1' }, targetName),
                React.createElement(IconButton, { icon: 'ph--x--regular', iconOnly: true, label: 'Close panel', onClick: onClose })),
            React.createElement("div", { className: 'flex gap-2 items-center', role: 'none' },
                React.createElement(Tag, { palette: outcomeColor }, outcomeLabel),
                React.createElement("span", { className: 'text-sm text-neutral' }, timestamp),
                React.createElement("span", { className: 'text-sm' }, currentDuration && `${formatDuration(currentDuration)}s`)),
            span.trigger && (React.createElement("div", { className: 'mt-2 text-sm', role: 'none' },
                "Trigger ID: ",
                React.createElement("span", { className: 'font-mono' }, span.trigger.dxn?.toString().split(':').pop())))),
        span.error && (React.createElement("div", { className: 'mlb-2 text-sm font-medium' },
            span.error.name,
            ": ",
            span.error.message)),
        Object.keys(span.input).length > 0 && (React.createElement("div", { className: 'mt-3' },
            React.createElement("details", { className: 'text-sm' },
                React.createElement("summary", { className: 'cursor-pointer font-medium' }, "Input Data"),
                React.createElement("pre", { className: 'mt-2 p-2 bg-neutral/5 rounded text-xs overflow-auto' }, JSON.stringify(span.input, null, 2)))))));
};
//# sourceMappingURL=SpanSummary.js.map