import { Input, Button } from 'antd';
import React, { useState, useRef, useEffect } from 'react';

type InfoCardProps = {
    onAdd: (content: string[]) => void;
    onHeightChange?: (height: number) => void; // 添加高度变化回调
}

const InfoCard: React.FC<InfoCardProps> = ({ onAdd, onHeightChange }) => {
    const [content, setContent] = useState('');
    const [addedContents, setAddedContents] = useState<string[]>([]);
    const contentContainerRef = useRef<HTMLDivElement>(null);
    
    // 监控内容区域高度变化并通知父组件
    useEffect(() => {
        if (!contentContainerRef.current) return;
        
        // 使用ResizeObserver监控元素大小变化
        const resizeObserver = new ResizeObserver(entries => {
            for (const entry of entries) {
                const height = entry.contentRect.height;
                // 通知父组件高度变化
                onHeightChange && onHeightChange(height + 20); // 添加一些缓冲空间
            }
        });
        
        resizeObserver.observe(contentContainerRef.current);
        
        return () => {
            if (contentContainerRef.current) {
                resizeObserver.unobserve(contentContainerRef.current);
            }
        };
    }, [addedContents, onHeightChange]);
    
    const handleAdd = () => {
        if (content) {
            const newContents = [...addedContents, content]; // 创建包含所有内容的新数组
            onAdd(newContents);  // 将累积数组传递给父组件
            setAddedContents(newContents);
            setContent('');
        }
    }

    const handleDelete = (index: number) => {
        const newContents = addedContents.filter((_, i) => i !== index);
        setAddedContents(newContents);
    }

    return (
        <div className="w-full">
            <div className="flex items-center mb-3 w-full">
                <Input
                    placeholder='请输入内容'
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    className="flex-1 mr-2"
                    onPressEnter={handleAdd}
                />
                <Button 
                    type='primary' 
                    onClick={handleAdd}
                    className="shrink-0"
                >
                    添加
                </Button>
            </div>
            
            {/* 内容容器 */}
            <div ref={contentContainerRef} className="w-full bg-white">
                {addedContents.map((item, index) => (
                    <div 
                        key={index} 
                        className="flex justify-between items-center p-2 border border-gray-200 rounded bg-gray-50 mb-2 last:mb-0"
                    >
                        <span>{item}</span>
                        <Button 
                            type="text" 
                            onClick={() => handleDelete(index)} 
                            className="text-red-500"
                        >
                            X
                        </Button>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default InfoCard;