"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelSelector = void 0;
const cn_ui_1 = require("@cainiaofe/cn-ui");
const react_1 = __importDefault(require("react"));
const constants_1 = require("../constants");
const ModelSelector = ({ model, onModelChange, visible, onVisibleChange, currentLabel, }) => {
    return (react_1.default.createElement("div", { className: "ai-field-config-model-bar" },
        react_1.default.createElement(cn_ui_1.CnPopup, { triggerType: "click", visible: visible, onVisibleChange: onVisibleChange, trigger: react_1.default.createElement("div", { className: "ai-field-config-model-selector", onClick: () => onVisibleChange(!visible) },
                react_1.default.createElement(cn_ui_1.CnIcon, { type: "message", size: "small", style: { color: '#1890ff' } }),
                react_1.default.createElement("span", null, currentLabel),
                react_1.default.createElement(cn_ui_1.CnIcon, { type: "arrow-down", size: "xs", style: { color: '#999' } })), placement: "bl" },
            react_1.default.createElement("div", { className: "ai-field-config-model-selector-menu" }, constants_1.MODEL_OPTIONS.map((option) => (react_1.default.createElement("div", { key: option.value, className: `ai-field-config-model-option ${model === option.value ? 'active' : ''}`, onClick: () => {
                    onModelChange(option.value);
                    onVisibleChange(false);
                } },
                react_1.default.createElement("div", { className: "ai-field-config-model-option-icon" }, option.icon === 'chat' ? (react_1.default.createElement(cn_ui_1.CnIcon, { type: "message", style: { fontSize: '18px', color: option.iconColor } })) : (react_1.default.createElement("div", { className: "ai-field-config-model-option-q-icon", style: { color: option.iconColor } }, "Q"))),
                react_1.default.createElement("div", { className: "ai-field-config-model-option-content" },
                    react_1.default.createElement("div", { className: "ai-field-config-model-option-title" },
                        option.label,
                        model === option.value && (react_1.default.createElement(cn_ui_1.CnIcon, { type: "check", size: "small", style: { color: '#1890ff', marginLeft: '6px' } }))),
                    option.description && (react_1.default.createElement("div", { className: "ai-field-config-model-option-description" }, option.description)),
                    react_1.default.createElement("div", { className: "ai-field-config-model-option-capability" }, option.capability))))))),
        react_1.default.createElement(cn_ui_1.CnIcon, { type: "link", style: { fontSize: '18px', color: '#666', cursor: 'pointer' } }),
        react_1.default.createElement(cn_ui_1.CnIcon, { type: "route", style: { fontSize: '18px', color: '#666', cursor: 'pointer' } })));
};
exports.ModelSelector = ModelSelector;
