import { CnPopup, CnIcon } from '@cainiaofe/cn-ui';
import React from 'react';
import { MODEL_OPTIONS } from '../constants';
export const ModelSelector = ({ model, onModelChange, visible, onVisibleChange, currentLabel, }) => {
    return (React.createElement("div", { className: "ai-field-config-model-bar" },
        React.createElement(CnPopup, { triggerType: "click", visible: visible, onVisibleChange: onVisibleChange, trigger: React.createElement("div", { className: "ai-field-config-model-selector", onClick: () => onVisibleChange(!visible) },
                React.createElement(CnIcon, { type: "message", size: "small", style: { color: '#1890ff' } }),
                React.createElement("span", null, currentLabel),
                React.createElement(CnIcon, { type: "arrow-down", size: "xs", style: { color: '#999' } })), placement: "bl" },
            React.createElement("div", { className: "ai-field-config-model-selector-menu" }, MODEL_OPTIONS.map((option) => (React.createElement("div", { key: option.value, className: `ai-field-config-model-option ${model === option.value ? 'active' : ''}`, onClick: () => {
                    onModelChange(option.value);
                    onVisibleChange(false);
                } },
                React.createElement("div", { className: "ai-field-config-model-option-icon" }, option.icon === 'chat' ? (React.createElement(CnIcon, { type: "message", style: { fontSize: '18px', color: option.iconColor } })) : (React.createElement("div", { className: "ai-field-config-model-option-q-icon", style: { color: option.iconColor } }, "Q"))),
                React.createElement("div", { className: "ai-field-config-model-option-content" },
                    React.createElement("div", { className: "ai-field-config-model-option-title" },
                        option.label,
                        model === option.value && (React.createElement(CnIcon, { type: "check", size: "small", style: { color: '#1890ff', marginLeft: '6px' } }))),
                    option.description && (React.createElement("div", { className: "ai-field-config-model-option-description" }, option.description)),
                    React.createElement("div", { className: "ai-field-config-model-option-capability" }, option.capability))))))),
        React.createElement(CnIcon, { type: "link", style: { fontSize: '18px', color: '#666', cursor: 'pointer' } }),
        React.createElement(CnIcon, { type: "route", style: { fontSize: '18px', color: '#666', cursor: 'pointer' } })));
};
