//
// Copyright 2025 DXOS.org
//
import React, { useCallback, useEffect, useState } from 'react';
import { LogLevel, log, shortLevelName, shouldLog } from '@dxos/log';
import { IconButton, Input, ScrollArea, Toolbar } from '@dxos/react-ui';
import { mx } from '@dxos/ui-theme';
import { Panel } from '../Panel';
export const LoggingPanel = ({ maxLines = 100, ...props }) => {
    const [text, setText] = useState('intent-dispatcher:DEBUG');
    const [active, setActive] = useState(false);
    const [entries, setEntries] = useState([]);
    useEffect(() => {
        if (!active) {
            return;
        }
        log.config({ filter: text });
        const dispose = log.addProcessor((config, entry) => {
            if (shouldLog(entry, config.filters)) {
                setEntries((entries) => [...entries, entry].slice(0, maxLines));
            }
        });
        return () => {
            dispose();
        };
    }, [active, text, maxLines]);
    const handleClear = useCallback(() => {
        setEntries([]);
    }, []);
    return (React.createElement(Panel, { ...props, icon: 'ph--list--regular', title: 'Logging', maxHeight: 0 },
        React.createElement(Toolbar.Root, { classNames: 'gap-2' },
            React.createElement(Input.Root, null,
                React.createElement(Input.TextInput, { placeholder: 'Filter', value: text, onChange: (ev) => setText(ev.target.value) })),
            React.createElement(Input.Root, null,
                React.createElement(Input.Switch, { checked: active, onCheckedChange: setActive })),
            React.createElement(Toolbar.IconButton, { icon: 'ph--x--regular', iconOnly: true, label: 'Clear', onClick: handleClear })),
        React.createElement(ScrollArea.Root, { orientation: 'vertical', classNames: 'max-bs-[240px]' },
            React.createElement(ScrollArea.Viewport, { classNames: 'text-xs' }, entries.map((entry, index) => (React.createElement("div", { key: index, className: 'group pli-1 grid grid-cols-[1rem_1fr_1fr_min-content] items-center' },
                React.createElement("div", { className: mx(entry.level > LogLevel.WARN
                        ? 'text-errorText'
                        : entry.level > LogLevel.INFO
                            ? 'text-warningText'
                            : entry.level > LogLevel.VERBOSE
                                ? 'text-infoText'
                                : 'text-successText') }, shortLevelName[entry.level]),
                React.createElement("div", { className: 'truncate text-subdued' }, entry.meta?.F?.split('/').pop()?.split('.')[0]),
                React.createElement("div", { className: 'truncate cursor-pointer', title: entry.message }, entry.message),
                React.createElement(IconButton, { icon: 'ph--clipboard--regular', iconOnly: true, size: 4, label: 'Copy', variant: 'ghost', classNames: 'cursor-pointer opacity-50 group-hover:opacity-100', onClick: () => navigator.clipboard.writeText(JSON.stringify(entry, null, 2)) }))))))));
};
//# sourceMappingURL=LoggingPanel.js.map