"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DetailPanel = void 0;
const i18n_1 = __importDefault(require("../../../../../locales/i18n.js"));
const react_1 = __importDefault(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const cn_ui_1 = require("@cainiaofe/cn-ui");
const detail_navigation_1 = require("./detail-navigation");
const field_icon_utils_1 = require("../../../utils/field-icon-utils");
const use_ai_table_icons_1 = require("../../../hooks/use-ai-table-icons");
const { CnRow, CnCol } = cn_ui_1.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_1.default.isValidElement(value)) {
        return value;
    }
    if (Array.isArray(value)) {
        const hasNonRenderableItem = value.some((item) => {
            if (item === null || item === undefined) {
                return false;
            }
            if (react_1.default.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总结 + 页签内容）+ 固定底部导航
 */
const DetailPanel = ({ title, titleIcon, aiSummaryContent, detailColumns, detailItems, selectedRecord, selectedIndex, totalCount, onPrevious, onNext, renderOperateCell, className, fieldMap, }) => {
    const getIcon = (0, field_icon_utils_1.useFieldIcon)();
    const aiIcons = (0, use_ai_table_icons_1.useAiTableIcons)();
    const [activeTab, setActiveTab] = react_1.default.useState('basic-info');
    const handleTabChange = react_1.default.useCallback((key) => {
        if (key === 'basic-info' || key === 'operation-record') {
            setActiveTab(key);
        }
    }, []);
    react_1.default.useEffect(() => {
        setActiveTab('basic-info');
    }, [selectedRecord === null || selectedRecord === void 0 ? void 0 : selectedRecord.id, selectedIndex]);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('detail-view-detail-content', className) },
        react_1.default.createElement("div", { className: "detail-view-scrollable" },
            react_1.default.createElement("div", { className: "detail-view-detail-content-header" },
                react_1.default.createElement("div", { className: "detail-view-detail-title" },
                    react_1.default.createElement("span", { className: "detail-view-detail-title-text" }, title),
                    titleIcon && react_1.default.createElement("span", { className: "detail-view-detail-title-icon" }, titleIcon)),
                react_1.default.createElement("div", { className: "detail-view-ai-summary-container" }, aiSummaryContent)),
            react_1.default.createElement("div", { className: "detail-view-detail-tabs-container" },
                react_1.default.createElement(cn_ui_1.CnTab, { shape: "pure", activeKey: activeTab, defaultActiveKey: "basic-info", onChange: handleTabChange },
                    react_1.default.createElement(cn_ui_1.CnTabItem, { key: "basic-info", title: i18n_1.default.get({ id: 'BasicInformation', dm: '基本信息' }) },
                        react_1.default.createElement("div", { className: "detail-view-detail-items" }, detailColumns.length === 0 ? (react_1.default.createElement("div", { className: "detail-view-empty" }, i18n_1.default.get({ id: 'NoFieldsToShow', dm: '暂无可展示字段' }))) : (detailItems.map((item) => {
                            let iconSrc;
                            if (item.column.isAiColumn) {
                                iconSrc = aiIcons.FIELD_AI;
                            }
                            else {
                                const componentType = (0, field_icon_utils_1.getFieldComponentType)(fieldMap, item.column.dataIndex, item.column.format);
                                iconSrc = getIcon(componentType);
                            }
                            return (react_1.default.createElement(CnRow, { className: "detail-view-detail-item", key: item.dataIndex, gutter: 0 },
                                react_1.default.createElement(CnCol, { span: 6, className: "detail-view-detail-item-label" },
                                    react_1.default.createElement("img", { className: "detail-view-detail-item-icon", src: iconSrc, alt: "" }),
                                    react_1.default.createElement("span", null, item.title)),
                                react_1.default.createElement(CnCol, { span: 18, className: "detail-view-detail-item-value" }, normalizeDetailValue(item.renderedValue))));
                        }))))))),
        react_1.default.createElement(detail_navigation_1.DetailNavigation, { selectedIndex: selectedIndex, totalCount: totalCount, onPrevious: onPrevious, onNext: onNext, renderOperateCell: renderOperateCell, selectedRecord: selectedRecord })));
};
exports.DetailPanel = DetailPanel;
exports.default = exports.DetailPanel;
