import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FolderTree } from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { prism, vscDarkPlus, } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { formatDuration, isToolError, getErrorMessage } from './utils';
import { ToolHeader, ToolHeaderSeparator, ToolHeaderDetail, ToolHeaderMeta, ToolContentBox, } from './shared';
import { ToolErrorDisplay } from './ToolErrorDisplay';
export function TreeRenderer({ contentJson, toolDurationMs, isExpanded, onToggle, }) {
    const result = contentJson.result || {};
    const args = (contentJson.args || {});
    const hasError = isToolError(result);
    const errorMessage = getErrorMessage(result);
    const errorStack = result && typeof result === 'object' && 'stack' in result
        ? String(result.stack)
        : undefined;
    const tree = String(result.tree || '');
    const lines = tree.split('\n').filter((l) => l.length > 0).length;
    const timeStr = formatDuration(toolDurationMs);
    const syntaxTheme = document?.documentElement.classList.contains('dark')
        ? vscDarkPlus
        : prism;
    const path = typeof args.path === 'string' ? args.path : '.';
    const depth = typeof args.depth === 'number' ? args.depth : undefined;
    return (_jsxs("div", { className: "text-xs", children: [_jsxs(ToolHeader, { toolName: "tree", isExpanded: isExpanded, onToggle: onToggle, isError: hasError, colorVariant: "cyan", canExpand: true, children: [path && path !== '.' && (_jsxs(_Fragment, { children: [_jsx(ToolHeaderSeparator, {}), _jsx("span", { className: "text-foreground/70 truncate min-w-0", title: path, children: path.length > 30 ? `…${path.slice(-30)}` : path })] })), _jsx(ToolHeaderSeparator, {}), _jsxs(ToolHeaderDetail, { children: [lines, " ", lines === 1 ? 'item' : 'items'] }), _jsx(ToolHeaderSeparator, {}), _jsx(ToolHeaderMeta, { children: timeStr })] }), isExpanded && hasError && errorMessage && (_jsx(ToolErrorDisplay, { error: errorMessage, stack: errorStack, showStack: true })), isExpanded && !hasError && (_jsxs("div", { className: "mt-2 ml-5 flex flex-col gap-2 max-w-full", children: [_jsx(ToolContentBox, { title: "path", icon: _jsx(FolderTree, { className: "h-3 w-3" }), subtitle: depth ? `depth: ${depth}` : undefined, copyText: path, maxHeight: "", children: _jsx("div", { className: "px-3 py-2 font-mono text-xs bg-muted/10 break-all", children: path }) }), tree && (_jsx(ToolContentBox, { title: "tree", copyText: tree, maxHeight: "max-h-80", children: _jsx("div", { className: "overflow-x-auto max-w-full", children: _jsx(SyntaxHighlighter, { language: "bash", style: syntaxTheme, customStyle: {
                                    margin: 0,
                                    padding: '0.75rem',
                                    fontSize: '0.75rem',
                                    lineHeight: '1.5',
                                    background: 'transparent',
                                    maxWidth: '100%',
                                }, wrapLines: true, wrapLongLines: true, children: tree }) }) })), !tree && (_jsx(ToolContentBox, { title: "tree", maxHeight: "", children: _jsx("div", { className: "px-3 py-2 text-muted-foreground/60 italic", children: "No tree output" }) }))] }))] }));
}
//# sourceMappingURL=TreeRenderer.js.map