import $i18n from '../../../../locales/i18n.js';
import * as React from 'react';
import { CnIcon } from '@cainiaofe/cn-ui';
import { conditionQueryDisplayUtils } from '../../../../cn-ai-filter/utils/display/condition-query-display-utils';
/**
 * 常用查询条件列表组件
 */
export function CommonQueryList({ loading, pinnedQueries, unpinnedQueries, onQueryClick, onPinQuery, onUnpinQuery, onClose, schema, }) {
    const handleQueryClick = React.useCallback((tokens) => {
        onQueryClick(tokens);
        onClose === null || onClose === void 0 ? void 0 : onClose();
    }, [onQueryClick, onClose]);
    if (loading) {
        return (React.createElement("div", { className: "cn-ai-filter__common-query-loading" }, $i18n.get({ id: 'Loading', dm: '加载中...' })));
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "cn-ai-filter__common-query-section-title" }, $i18n.get({ id: 'MySearchCriteria', dm: '我的查询条件' })),
        pinnedQueries.length > 0 ? (React.createElement(React.Fragment, null, pinnedQueries.map((pinnedQuery) => {
            const displayItems = conditionQueryDisplayUtils(pinnedQuery.tokens, schema);
            return (React.createElement("div", { key: pinnedQuery.id, className: "cn-ai-filter__common-query-item cn-ai-filter__common-query-item--pinned" },
                React.createElement("div", { className: "cn-ai-filter__common-query-content", onClick: () => handleQueryClick(pinnedQuery.tokens) }, displayItems.map((item, itemIndex) => {
                    const displayKey = `${pinnedQuery.id}-item-${itemIndex}`;
                    if (item.type === 'NATURAL_LANGUAGE' && item.text) {
                        return (React.createElement("div", { key: displayKey, className: "cn-ai-filter__common-query-text" }, item.text));
                    }
                    else if (item.type === 'STRUCTURED' && item.tag) {
                        return (React.createElement("div", { key: displayKey, className: "cn-ai-filter__common-query-tag" },
                            item.tag.displayName,
                            ": ",
                            item.tag.displayValue));
                    }
                    return null;
                })),
                React.createElement(CnIcon, { type: "pin", size: "medium", className: "cn-ai-filter__common-query-pin-icon cn-ai-filter__common-query-pin-icon--pinned", onClick: (e) => {
                        e.stopPropagation();
                        onUnpinQuery(pinnedQuery.id);
                    } })));
        }))) : (React.createElement("div", { className: "cn-ai-filter__common-query-empty" }, $i18n.get({ id: 'NoMyQueryCriteria', dm: '暂无我的查询条件' }))),
        pinnedQueries.length > 0 && unpinnedQueries.length > 0 && (React.createElement("div", { className: "cn-ai-filter__common-query-divider" })),
        React.createElement("div", { className: "cn-ai-filter__common-query-section-title" }, $i18n.get({ id: 'AIIntelligentRecommendation', dm: 'AI智能推荐' })),
        unpinnedQueries.length > 0 ? (React.createElement(React.Fragment, null, unpinnedQueries.map((translator, index) => {
            const { tokens = [], id } = translator;
            // 使用 conditionQueryDisplayUtils 格式化显示项
            const displayItems = conditionQueryDisplayUtils(tokens, schema);
            // 生成唯一 key
            const itemKey = id || `query-${index}`;
            return (React.createElement("div", { key: itemKey, className: "cn-ai-filter__common-query-item" },
                React.createElement("div", { className: "cn-ai-filter__common-query-content", onClick: () => handleQueryClick(tokens) }, displayItems.map((item, itemIndex) => {
                    const displayKey = `${itemKey}-item-${itemIndex}`;
                    if (item.type === 'NATURAL_LANGUAGE' && item.text) {
                        return (React.createElement("div", { key: displayKey, className: "cn-ai-filter__common-query-text" }, item.text));
                    }
                    else if (item.type === 'STRUCTURED' && item.tag) {
                        return (React.createElement("div", { key: displayKey, className: "cn-ai-filter__common-query-tag" },
                            item.tag.displayName,
                            ": ",
                            item.tag.displayValue));
                    }
                    return null;
                })),
                React.createElement(CnIcon, { type: "pin", size: "medium", className: "cn-ai-filter__common-query-pin-icon", onClick: (e) => {
                        e.stopPropagation();
                        onPinQuery(translator);
                    } })));
        }))) : (React.createElement("div", { className: "cn-ai-filter__common-query-empty" }, $i18n.get({ id: 'NoAIIntelligentRecommendation', dm: '暂无AI智能推荐' })))));
}
