import $i18n from '../../../../../locales/i18n.js';
import React from 'react';
import classNames from 'classnames';
import { CnTab, CnTabItem, CnGrid } from '@cainiaofe/cn-ui';
import { DetailNavigation } from './detail-navigation';
import { getFieldComponentType, useFieldIcon } from '../../../utils/field-icon-utils';
import { useAiTableIcons } from '../../../hooks/use-ai-table-icons';
const { CnRow, CnCol } = CnGrid;
const stringifyFallback = (value) => {
    try {
        return JSON.stringify(value);
    }
    catch {
        return String(value);
    }
};
const normalizeDetailValue = (value) => {
    if (value === null || value === undefined || value === '') {
        return '- -';
    }
    if (React.isValidElement(value)) {
        return value;
    }
    if (Array.isArray(value)) {
        const hasNonRenderableItem = value.some((item) => {
            if (item === null || item === undefined) {
                return false;
            }
            if (React.isValidElement(item)) {
                return false;
            }
            return !['string', 'number', 'boolean'].includes(typeof item);
        });
        return hasNonRenderableItem ? stringifyFallback(value) : value;
    }
    if (typeof value === 'object') {
        return stringifyFallback(value);
    }
    return value;
};
/**
 * 详情面板组件
 * 封装右侧详情区域的通用结构：可滚动区域（标题 + AI总结 + 页签内容）+ 固定底部导航
 */
export const DetailPanel = ({ title, titleIcon, aiSummaryContent, detailColumns, detailItems, selectedRecord, selectedIndex, totalCount, onPrevious, onNext, renderOperateCell, className, fieldMap, }) => {
    const getIcon = useFieldIcon();
    const aiIcons = useAiTableIcons();
    const [activeTab, setActiveTab] = React.useState('basic-info');
    const handleTabChange = React.useCallback((key) => {
        if (key === 'basic-info' || key === 'operation-record') {
            setActiveTab(key);
        }
    }, []);
    React.useEffect(() => {
        setActiveTab('basic-info');
    }, [selectedRecord === null || selectedRecord === void 0 ? void 0 : selectedRecord.id, selectedIndex]);
    return (React.createElement("div", { className: classNames('detail-view-detail-content', className) },
        React.createElement("div", { className: "detail-view-scrollable" },
            React.createElement("div", { className: "detail-view-detail-content-header" },
                React.createElement("div", { className: "detail-view-detail-title" },
                    React.createElement("span", { className: "detail-view-detail-title-text" }, title),
                    titleIcon && React.createElement("span", { className: "detail-view-detail-title-icon" }, titleIcon)),
                React.createElement("div", { className: "detail-view-ai-summary-container" }, aiSummaryContent)),
            React.createElement("div", { className: "detail-view-detail-tabs-container" },
                React.createElement(CnTab, { shape: "pure", activeKey: activeTab, defaultActiveKey: "basic-info", onChange: handleTabChange },
                    React.createElement(CnTabItem, { key: "basic-info", title: $i18n.get({ id: 'BasicInformation', dm: '基本信息' }) },
                        React.createElement("div", { className: "detail-view-detail-items" }, detailColumns.length === 0 ? (React.createElement("div", { className: "detail-view-empty" }, $i18n.get({ id: 'NoFieldsToShow', dm: '暂无可展示字段' }))) : (detailItems.map((item) => {
                            let iconSrc;
                            if (item.column.isAiColumn) {
                                iconSrc = aiIcons.FIELD_AI;
                            }
                            else {
                                const componentType = getFieldComponentType(fieldMap, item.column.dataIndex, item.column.format);
                                iconSrc = getIcon(componentType);
                            }
                            return (React.createElement(CnRow, { className: "detail-view-detail-item", key: item.dataIndex, gutter: 0 },
                                React.createElement(CnCol, { span: 6, className: "detail-view-detail-item-label" },
                                    React.createElement("img", { className: "detail-view-detail-item-icon", src: iconSrc, alt: "" }),
                                    React.createElement("span", null, item.title)),
                                React.createElement(CnCol, { span: 18, className: "detail-view-detail-item-value" }, normalizeDetailValue(item.renderedValue))));
                        }))))))),
        React.createElement(DetailNavigation, { selectedIndex: selectedIndex, totalCount: totalCount, onPrevious: onPrevious, onNext: onNext, renderOperateCell: renderOperateCell, selectedRecord: selectedRecord })));
};
export default DetailPanel;
