import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SETTING_CONFIGS } from './ModelControls';
export const ChatSettingEditor = ({ settingEditor, settingInputValue, settingError, defaultModel, onSubmit, onInputChange, onClose }) => {
    const activeSettingConfig = settingEditor ? SETTING_CONFIGS[settingEditor.key] : null;
    if (!settingEditor || !defaultModel || !activeSettingConfig) {
        return null;
    }
    return (_jsx("div", { className: 'fixed inset-0 z-50 flex items-center justify-center bg-gray-900/40 px-4 py-6 backdrop-blur-sm', children: _jsx("div", { className: 'w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl', children: _jsxs("form", { onSubmit: onSubmit, className: 'space-y-4', children: [_jsxs("div", { className: 'space-y-1', children: [_jsx("p", { className: 'text-sm font-semibold text-gray-900', children: activeSettingConfig.label }), _jsx("p", { className: 'text-xs text-gray-500', children: activeSettingConfig.description })] }), _jsxs("div", { className: 'space-y-3', children: [activeSettingConfig.type === 'number' ? (_jsxs("div", { className: 'space-y-2', children: [_jsxs("label", { className: 'block text-xs font-medium text-gray-600', htmlFor: 'model-setting-input', children: ["Value", _jsxs("span", { className: 'ml-2 text-[11px] text-gray-400', children: ["(min ", activeSettingConfig.min, ", max ", activeSettingConfig.max, ")"] })] }), _jsx("input", { id: 'model-setting-input', type: 'number', min: activeSettingConfig.min, max: activeSettingConfig.max, step: activeSettingConfig.step, value: settingInputValue, onChange: (event) => onInputChange(event.target.value), className: 'w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200', autoFocus: true, required: true })] })) : (_jsxs("div", { className: 'space-y-2', children: [_jsx("label", { className: 'block text-xs font-medium text-gray-600', htmlFor: 'model-setting-select', children: "Choose an option" }), _jsx("select", { id: 'model-setting-select', value: settingInputValue, onChange: (event) => onInputChange(event.target.value), className: 'w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200', children: activeSettingConfig.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("ul", { className: 'space-y-1 text-[11px] text-gray-500', children: activeSettingConfig.options.map((option) => (option.helper ? (_jsxs("li", { children: [_jsxs("span", { className: 'font-medium text-gray-600', children: [option.label, ":"] }), " ", option.helper] }, `${option.value}-helper`)) : null)) })] })), settingError && (_jsx("p", { className: 'text-xs text-red-600', children: settingError }))] }), _jsxs("div", { className: 'flex justify-end gap-2 pt-2', children: [_jsx("button", { type: 'button', onClick: onClose, className: 'inline-flex items-center rounded-full border border-gray-200 px-4 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300', children: "Cancel" }), _jsx("button", { type: 'submit', className: 'inline-flex items-center rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500', children: "Save" })] })] }) }) }));
};
