import React from 'react';
import classNames from 'classnames';
import { CnListPro, CnListProItem } from '@cainiaofe/cn-ui';
import { useVirtualizer } from '../../../../../cn-ai-table/react-virtual';
import { safeGetRowKey } from '../../../../../cn-ai-table/view/utils/primary-key';
import './virtualized-card-list.scss';
/**
 * 虚拟滚动卡片列表组件
 * 支持大量数据的高性能渲染
 * 使用统一的公共类名，支持通过 className 传递自定义样式
 */
export const VirtualizedCardList = ({ data, renderCardContent, renderCardTitle, showFieldTitle, selectedIndex, onItemClick, visibleFieldCount, primaryKey, className, }) => {
    const scrollContainerRef = React.useRef(null);
    // 根据字段数量和是否显示标题估算卡片高度
    const estimatedCardHeight = React.useMemo(() => {
        const base = showFieldTitle ? 140 : 120;
        const perField = 28;
        return base + visibleFieldCount * perField;
    }, [showFieldTitle, visibleFieldCount]);
    const virtualizer = useVirtualizer({
        count: data.length,
        getScrollElement: () => scrollContainerRef.current,
        estimateSize: () => estimatedCardHeight,
        overscan: 5,
    });
    // 当选中项变化时，滚动到选中项
    React.useEffect(() => {
        if (selectedIndex >= 0 && selectedIndex < data.length) {
            virtualizer.scrollToIndex(selectedIndex, {
                align: 'center',
                behavior: 'smooth',
            });
        }
    }, [selectedIndex, data.length, virtualizer]);
    const virtualItems = virtualizer.getVirtualItems();
    const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
    const paddingBottom = virtualItems.length > 0
        ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
        : 0;
    const virtualizedData = virtualItems
        .map((virtualItem) => ({
        virtualItem,
        record: data[virtualItem.index],
        index: virtualItem.index,
    }))
        .filter((item) => item.record);
    return (React.createElement("div", { className: classNames('card-list-scroll', className), ref: scrollContainerRef },
        React.createElement("div", { style: { height: paddingTop } }),
        React.createElement(CnListPro, { shape: "card", className: "card-list-grid", grid: {
                column: 1,
                wrap: true,
            }, dataSource: virtualizedData, renderItem: (item) => {
                const { virtualItem, record, index } = item;
                if (!record) {
                    return null;
                }
                const isSelected = index === selectedIndex;
                const rowKey = safeGetRowKey(record, primaryKey, virtualItem.index);
                return (React.createElement("div", { key: rowKey, "data-index": virtualItem.index, ref: virtualizer.measureElement },
                    React.createElement(CnListProItem, { className: classNames('card-item', {
                            'card-item--selected': isSelected,
                        }), onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(record, index), style: { cursor: 'pointer' }, title: renderCardTitle(record, virtualItem.index), description: renderCardContent(record, virtualItem.index) })));
            } }),
        React.createElement("div", { style: { height: paddingBottom } })));
};
export default VirtualizedCardList;
