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