import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import ZodSchemaForm, { lightTheme, darkTheme } from 'zod-schema-form';
import { useTheme, useThemeName } from '../theme';
const MCPTool = ({ tool, callTool }) => {
    const currentTheme = useTheme();
    const themeName = useThemeName();
    const schemaEntries = React.useMemo(() => {
        return Object.entries(tool.inputSchema?.properties ?? {});
    }, [tool.inputSchema?.properties]);
    const [toolResponse, setToolResponse] = React.useState(null);
    const [eventLog, setEventLog] = React.useState([]);
    const [isRunning, setIsRunning] = React.useState(false);
    const [error, setError] = React.useState(null);
    const handleSubmit = (data) => {
        setIsRunning(true);
        setError(null);
        setEventLog([]);
        setToolResponse(null);
        callTool(tool.name, data, {
            onEvent: (message, context) => {
                const entry = {
                    message,
                    context,
                    receivedAt: Date.now()
                };
                setEventLog((prev) => [...prev, entry].slice(-100));
            }
        })
            .then((outcome) => {
            setToolResponse(outcome.result);
            setEventLog(outcome.events);
        })
            .catch((err) => {
            setError(err.message);
        })
            .finally(() => {
            setIsRunning(false);
        });
    };
    const renderedResponse = React.useMemo(() => {
        if (toolResponse === null) {
            return 'null';
        }
        try {
            return JSON.stringify(toolResponse, null, 2);
        }
        catch (err) {
            return String(toolResponse);
        }
    }, [toolResponse]);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: currentTheme.mcpTool.header.container, children: [_jsx("h2", { className: currentTheme.mcpTool.header.title, children: tool.title ?? tool.name }), _jsx("p", { className: currentTheme.mcpTool.header.description, children: tool.description })] }), _jsxs("div", { className: currentTheme.mcpTool.layout, children: [_jsxs("div", { className: currentTheme.mcpTool.formColumn.container, children: [_jsx(ZodSchemaForm
                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                            , { 
                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                schema: schemaEntries, onSubmit: handleSubmit, size: 'small', submitButtonText: isRunning ? 'Running...' : 'Call Tool', theme: themeName === 'dark' ? darkTheme : lightTheme }), isRunning && (_jsx("div", { className: currentTheme.mcpTool.formColumn.runningNotice, children: "Executing tool call..." })), error && (_jsx("div", { className: currentTheme.mcpTool.formColumn.errorNotice, children: error })), eventLog.length > 0 && (_jsxs("div", { className: currentTheme.mcpTool.formColumn.eventLogCard, children: [_jsx("h3", { className: currentTheme.mcpTool.formColumn.eventLogTitle, children: "Event stream" }), _jsx("div", { className: currentTheme.mcpTool.formColumn.eventLogList, children: eventLog.map((event, index) => {
                                            const prefix = event.context.isFinal ? 'final' : 'event';
                                            const timestamp = new Date(event.receivedAt).toLocaleTimeString();
                                            return (_jsxs("div", { className: currentTheme.mcpTool.formColumn.eventLogEntry, children: [_jsxs("div", { className: currentTheme.mcpTool.formColumn.eventLogEntryMeta, children: [_jsx("span", { children: prefix }), _jsx("span", { children: timestamp })] }), _jsx("pre", { className: currentTheme.mcpTool.formColumn.eventLogEntryPre, children: JSON.stringify(event.message, null, 2) })] }, `${event.context.requestId}-${index}`));
                                        }) })] }))] }), _jsxs("div", { className: currentTheme.mcpTool.responseColumn.container, children: [_jsxs("div", { className: currentTheme.mcpTool.responseColumn.headerRow, children: [_jsx("h3", { className: currentTheme.mcpTool.responseColumn.title, children: "Rendered response" }), toolResponse !== null && (_jsx("span", { className: currentTheme.mcpTool.responseColumn.meta, children: "Latest update" }))] }), _jsx("div", { className: currentTheme.mcpTool.responseColumn.codeBlock, children: _jsx("code", { children: renderedResponse }) })] })] })] }));
};
export default MCPTool;
