"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldReferenceItem = FieldReferenceItem;
exports.FunctionReferenceItem = FunctionReferenceItem;
exports.InfoDetailPanel = InfoDetailPanel;
const i18n_1 = __importDefault(require("../../../../../../../locales/i18n.js"));
/**
 * 公式编辑器弹窗内的子组件
 * - FieldReferenceItem: 字段引用列表项
 * - FunctionReferenceItem: 函数引用列表项
 * - InfoDetailPanel: 右侧 hover 详情面板
 */
const react_1 = __importDefault(require("react"));
const cn_ui_1 = require("@cainiaofe/cn-ui");
const formula_constants_1 = require("./formula-constants");
/* ───────── FieldReferenceItem ───────── */
function FieldReferenceItem({ field, editorRef, onHover, onLeave, isActive, }) {
    const iconType = formula_constants_1.FIELD_ICON_MAP[field.component || ''] || 'list';
    const handleClick = () => {
        var _a;
        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.insertField(field);
    };
    return (react_1.default.createElement("div", { className: `formula-editor-dialog-field-item${isActive ? ' active' : ''}`, onClick: handleClick, onMouseEnter: () => onHover(field), onMouseLeave: onLeave },
        react_1.default.createElement(cn_ui_1.CnIcon, { type: iconType, size: "small", className: "formula-editor-dialog-field-icon" }),
        react_1.default.createElement("span", { className: "formula-editor-dialog-field-name" }, field.title)));
}
/* ───────── FunctionReferenceItem ───────── */
function FunctionReferenceItem({ fn, onInsert, onHover, onLeave, isActive, }) {
    return (react_1.default.createElement("div", { className: `formula-editor-dialog-field-item${isActive ? ' active' : ''}`, onClick: onInsert, onMouseEnter: () => onHover(fn), onMouseLeave: onLeave },
        react_1.default.createElement("span", { className: "formula-editor-dialog-fn-icon" }, "fx"),
        react_1.default.createElement("span", { className: "formula-editor-dialog-field-name" }, fn.name)));
}
/* ───────── InfoDetailPanel ───────── */
function InfoDetailPanel({ hoveredItem }) {
    if (!hoveredItem) {
        return (react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-empty" }, i18n_1.default.get({ id: 'HoverOverTheItemOnTheLeftTo', dm: '将鼠标悬停在左侧项目上查看详情' })));
    }
    if (hoveredItem.type === 'field') {
        return react_1.default.createElement(FieldDetail, { field: hoveredItem.data });
    }
    return react_1.default.createElement(FunctionDetail, { fn: hoveredItem.data });
}
function FieldDetail({ field }) {
    const fieldTypeLabel = (0, formula_constants_1.getFieldTypeLabel)(field.component);
    const iconType = formula_constants_1.FIELD_ICON_MAP[field.component || ''] || 'list';
    return (react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-content" },
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-header" },
            react_1.default.createElement(cn_ui_1.CnIcon, { type: iconType, size: "small", style: { color: '#1677ff' } }),
            react_1.default.createElement("span", { className: "formula-editor-dialog-field-info-name" }, field.title)),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-desc" }, i18n_1.default.get({
            id: 'TheFieldTypeLabelFieldInTheDataT_85843664',
            dm: '数据表中的一列{fieldTypeLabel}字段，返回当前行中该列对应的值，可用于公式计算',
        }, { fieldTypeLabel: fieldTypeLabel })),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example-label" }, i18n_1.default.get({ id: 'Example', dm: '示例' })),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example" },
            react_1.default.createElement("code", null, `{${field.dataIndex}}`),
            react_1.default.createElement(cn_ui_1.CnIcon, { type: "copy", size: "small", className: "formula-editor-dialog-copy-btn", onClick: () => {
                    navigator.clipboard.writeText(`{${field.dataIndex}}`);
                    cn_ui_1.CnMessage.success(i18n_1.default.get({ id: 'Copied', dm: '已复制' }));
                } }))));
}
function FunctionDetail({ fn }) {
    return (react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-content" },
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-header" },
            react_1.default.createElement("span", { className: "formula-editor-dialog-fn-icon-lg" }, "fx"),
            react_1.default.createElement("span", { className: "formula-editor-dialog-field-info-name" }, fn.name)),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-desc" }, fn.description),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example-label" }, i18n_1.default.get({ id: 'Grammar', dm: '语法' })),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example" },
            react_1.default.createElement("code", null, fn.syntax),
            react_1.default.createElement(cn_ui_1.CnIcon, { type: "copy", size: "small", className: "formula-editor-dialog-copy-btn", onClick: () => {
                    navigator.clipboard.writeText(fn.syntax);
                    cn_ui_1.CnMessage.success(i18n_1.default.get({ id: 'Copied', dm: '已复制' }));
                } })),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example-label", style: { marginTop: '12px' } }, i18n_1.default.get({ id: 'Example', dm: '示例' })),
        react_1.default.createElement("div", { className: "formula-editor-dialog-field-info-example" },
            react_1.default.createElement("code", null, fn.example),
            react_1.default.createElement(cn_ui_1.CnIcon, { type: "copy", size: "small", className: "formula-editor-dialog-copy-btn", onClick: () => {
                    navigator.clipboard.writeText(fn.example);
                    cn_ui_1.CnMessage.success(i18n_1.default.get({ id: 'Copied', dm: '已复制' }));
                } }))));
}
