import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ZodSchemaForm, { lightTheme, darkTheme } from 'zod-schema-form';
import { useTheme, useThemeName } from '../theme';
export const NewConnectionForm = ({ initialValues, onSubmit, onCancel }) => {
    const theme = useTheme();
    const themeName = useThemeName();
    return (_jsxs("div", { className: theme.newConnectionForm.container, children: [_jsxs("div", { className: theme.newConnectionForm.header, children: [_jsx("h2", { className: theme.newConnectionForm.title, children: "New Connection" }), _jsx("button", { className: theme.newConnectionForm.backButton, onClick: () => onCancel(initialValues), children: "Back" })] }), _jsx(ZodSchemaForm, { schema: [
                    ['serverName', { type: 'string', label: 'Server Name', default: 'New Server' }],
                    ['url', { type: 'string', label: 'MCP Endpoint URL', default: 'https://lorem-api.com/api/mcp' }],
                    ['headers', { type: 'object', label: 'Headers (optional)' }]
                ], initialValues: initialValues ?? undefined, onSubmit: (values) => {
                    const { serverName, url, headers } = values;
                    onSubmit({ serverName, url, headers: headers || {} });
                }, submitButtonText: 'Connect', size: 'small', theme: themeName === 'dark' ? darkTheme : lightTheme })] }));
};
