import { ChevronsDownUp, ChevronsUpDown, Newspaper, TableProperties, Wrench } from "@sofa-design/icons";
import { Popover } from "antd";
import classNames from "clsx";
import { motion } from "framer-motion";
import React, { useContext, useMemo } from "react";
import { I18nContext } from "../I18n";
import { ActionIconBox } from "../index";
import { CostMillis } from "./CostMillis";
import { FlipText } from "./FlipText";
/**
 * TitleInfo 组件 - 标题信息组件
 *
 * 该组件用于显示思维链项的标题信息，包括标题文本、耗时、类别、元数据等。
 * 支持折叠/展开功能、元数据点击、自定义渲染等。
 *
 * @component
 * @description 标题信息组件，显示思维链项的标题和相关信息
 * @param {Object} props - 组件属性
 * @param {number} [props.costMillis] - 耗时（毫秒）
 * @param {string} props.category - 标题类别
 * @param {string} props.title - 标题文本
 * @param {string} props.prefixCls - 样式前缀
 * @param {string} props.hashId - 样式哈希ID
 * @param {boolean} props.collapse - 是否折叠
 * @param {boolean} [props.isFinished] - 是否已完成
 * @param {(collapse: boolean) => void} props.setCollapse - 设置折叠状态
 * @param {(meta: Partial<DocMeta>) => void} [props.onMetaClick] - 元数据点击回调
 * @param {string} [props.instanceId] - 实例ID
 * @param {Function} [props.titleExtraRender] - 标题额外渲染函数
 * @param {Record<string, Array>} props.meta - 元数据对象
 *
 * @example
 * ```tsx
 * <TitleInfo
 *   title="分析用户需求"
 *   category="thinking"
 *   costMillis={1500}
 *   collapse={false}
 *   setCollapse={(collapse) => setCollapse(collapse)}
 *   meta={{ knowledge: [{ name: "知识库1", icon: "db", uuid: "1" }] }}
 * />
 * ```
 *
 * @returns {React.ReactElement} 渲染的标题信息组件
 *
 * @remarks
 * - 支持标题中的元数据标签解析
 * - 提供折叠/展开功能
 * - 显示操作耗时
 * - 支持元数据点击交互
 * - 提供自定义渲染扩展
 * - 支持国际化
 * - 美观的动画效果
 * - 响应式布局
 */ export var TitleInfo = function TitleInfo(props) {
    var collapse = props.collapse, isFinished = props.isFinished, setCollapse = props.setCollapse;
    var locale = useContext(I18nContext).locale;
    var titleDom = useMemo(function() {
        var _props_title;
        var titleSegments = props === null || props === void 0 ? void 0 : (_props_title = props.title) === null || _props_title === void 0 ? void 0 : _props_title.split(/(\$\{.*})/);
        return titleSegments === null || titleSegments === void 0 ? void 0 : titleSegments.map(function(tag, index) {
            var meta = props.meta || {};
            if (tag.startsWith('${') && tag.endsWith('}')) {
                var _tag_replaceAll, _this;
                var infoTitle = tag;
                var metaList = [
                    meta[(_tag_replaceAll = tag.replaceAll('${', '')) === null || _tag_replaceAll === void 0 ? void 0 : _tag_replaceAll.replaceAll('}', '')]
                ].flat(1) || [];
                if (Array.isArray(metaList)) {
                    if (metaList.length > 1) {
                        if (props.category === 'RagRetrieval') {
                            infoTitle = locale === null || locale === void 0 ? void 0 : locale.multipleKnowledgeBases;
                        } else if (props.category === 'TableSql') {
                            var _metaList_at;
                            infoTitle = ((_metaList_at = metaList.at(0)) === null || _metaList_at === void 0 ? void 0 : _metaList_at.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleTables);
                        } else if (props.category === 'ToolCall') {
                            var _metaList_at1;
                            infoTitle = ((_metaList_at1 = metaList.at(0)) === null || _metaList_at1 === void 0 ? void 0 : _metaList_at1.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleTools);
                        } else {
                            var _metaList_at2;
                            infoTitle = ((_metaList_at2 = metaList.at(0)) === null || _metaList_at2 === void 0 ? void 0 : _metaList_at2.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleData);
                        }
                    }
                    if (metaList.length === 1) {
                        var _metaList_at3;
                        infoTitle = ((_metaList_at3 = metaList.at(0)) === null || _metaList_at3 === void 0 ? void 0 : _metaList_at3.name) || tag;
                    }
                }
                return /*#__PURE__*/ React.createElement(Popover, {
                    key: index,
                    open: metaList.length > 1 ? undefined : false,
                    trigger: "hover",
                    content: /*#__PURE__*/ React.createElement("div", {
                        style: {
                            display: 'flex',
                            flexWrap: 'wrap',
                            flexDirection: 'column',
                            gap: '4px',
                            maxHeight: 400,
                            overflow: 'auto',
                            textAlign: 'left',
                            width: '100%'
                        }
                    }, (_this = [
                        metaList
                    ]) === null || _this === void 0 ? void 0 : _this.flat(1).filter(function(item) {
                        return item;
                    }).map(function(item, subIndex) {
                        return /*#__PURE__*/ React.createElement(motion.span, {
                            key: "".concat(index, "-").concat(subIndex),
                            className: classNames("".concat(props.prefixCls, "-content-list-item-info"), props.hashId),
                            onClick: function onClick() {
                                var _props_onMetaClick;
                                props === null || props === void 0 ? void 0 : (_props_onMetaClick = props.onMetaClick) === null || _props_onMetaClick === void 0 ? void 0 : _props_onMetaClick.call(props, {
                                    doc_name: item.name,
                                    doc_id: item.uuid,
                                    type: item.type,
                                    origin_text: item.description
                                });
                            }
                        }, /*#__PURE__*/ React.createElement("span", {
                            style: {
                                overflow: 'hidden',
                                textWrap: 'nowrap',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                textAlign: 'left'
                            }
                        }, item.name));
                    }))
                }, /*#__PURE__*/ React.createElement(motion.span, {
                    key: index,
                    className: classNames("".concat(props.prefixCls, "-content-list-item-info"), "".concat(props.prefixCls, "-content-list-item-info-tag"), props.hashId)
                }, props.category === 'ToolCall' && /*#__PURE__*/ React.createElement(Wrench, {
                    width: 18,
                    height: 18,
                    style: {
                        fontSize: 18
                    }
                }), props.category === 'RagRetrieval' && /*#__PURE__*/ React.createElement(Newspaper, {
                    width: 18,
                    height: 18,
                    style: {
                        fontSize: 18
                    }
                }), props.category === 'TableSql' ? /*#__PURE__*/ React.createElement(TableProperties, {
                    style: {
                        fontSize: 18
                    },
                    width: 18,
                    height: 18
                }) : null, /*#__PURE__*/ React.createElement("span", {
                    className: classNames("".concat(props.prefixCls, "-content-list-item-info-tag-text"), props.hashId)
                }, isFinished ? infoTitle || tag : /*#__PURE__*/ React.createElement(FlipText, {
                    word: infoTitle || tag
                }))));
            }
            return /*#__PURE__*/ React.createElement("span", {
                key: index,
                style: {
                    overflow: 'hidden',
                    textWrap: 'nowrap',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                }
            }, isFinished ? tag : /*#__PURE__*/ React.createElement(FlipText, {
                word: tag
            }));
        });
    }, [
        props.title
    ]);
    var extraTitleDom = /*#__PURE__*/ React.createElement(ActionIconBox, {
        "data-testid": "action-icon-box",
        title: collapse ? locale === null || locale === void 0 ? void 0 : locale.expand : locale === null || locale === void 0 ? void 0 : locale.collapse,
        onClick: function onClick() {
            setCollapse === null || setCollapse === void 0 ? void 0 : setCollapse(!collapse);
        }
    }, !collapse ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
        "data-testid": "expand-icon"
    }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
        "data-testid": "collapse-icon"
    }));
    return useMemo(function() {
        return /*#__PURE__*/ React.createElement("div", {
            "data-testid": "title-info",
            className: classNames("".concat(props.prefixCls, "-content-list-item-info"), props.hashId)
        }, /*#__PURE__*/ React.createElement("div", {
            "data-testid": "title-text",
            className: classNames("".concat(props.prefixCls, "-content-list-item-info-title"), props.hashId)
        }, titleDom, /*#__PURE__*/ React.createElement(CostMillis, {
            costMillis: props.costMillis
        })), /*#__PURE__*/ React.createElement("div", {
            className: classNames("".concat(props.prefixCls, "-content-list-item-info-action"), props.hashId)
        }, props.titleExtraRender ? props.titleExtraRender(extraTitleDom) : extraTitleDom));
    }, [
        titleDom,
        isFinished,
        collapse,
        props.costMillis
    ]);
};
