import React, { useState, useRef, useEffect } from 'react';
import { Tooltip, Button, Empty } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import RightIcon from '@/app/icons/right.svg';
interface FileListProps {
    filelist: string[];
}

export function FileList(props: FileListProps) {
    const { filelist } = props;
    const containerRef = useRef<HTMLDivElement>(null);
    const [showLeftButton, setShowLeftButton] = useState(false);
    const [showRightButton, setShowRightButton] = useState(false);

    // 检测是否需要显示按钮
    useEffect(() => {
        if (containerRef.current) {
            const { scrollWidth, clientWidth, scrollLeft } = containerRef.current;
            setShowLeftButton(scrollLeft > 0);
            setShowRightButton(scrollLeft < scrollWidth - clientWidth);
        }
    }, [filelist]);

    // 滚动步长
    const scrollStep = 60; // 每次滚动的像素数

    // 向左滚动
    const scrollLeft = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({
                left: -scrollStep,
                behavior: 'smooth',
            });
        }
    };

    // 向右滚动
    const scrollRight = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({
                left: scrollStep,
                behavior: 'smooth',
            });
        }
    };

    return (
        <div>
            {filelist.length ? (
                <div
                    ref={containerRef}
                    style={{
                        display: 'flex',
                        justifyContent: 'center',
                        overflowX: 'auto',
                        gap: '10px',
                        padding: '10px',
                        position: 'relative',
                    }}
                >
                    {/* 左侧按钮 */}
                    {showLeftButton && (
                        <Button
                            shape="circle"
                            icon={<SearchOutlined />}
                            size="large"
                            onClick={scrollLeft}
                            style={{
                                position: 'absolute',
                                left: 0,
                                top: '50%',
                                transform: 'translateY(-50%)',
                                zIndex: 1,
                            }}
                        />
                    )}

                    {/* 图片列表 */}
                    {filelist.map((fileUrl, index) => (
                        <img
                            key={index}
                            src={fileUrl}
                            alt={`image-${index}`}
                            style={{ width: '60px', height: '60px', objectFit: 'cover', borderRadius: '8px' }}
                        />
                    ))}

                    {/* 右侧按钮 */}
                    {showRightButton && (
                        <Button
                            shape="circle"
                            icon={RightIcon}
                            size="large"
                            onClick={scrollRight}
                            style={{
                                position: 'absolute',
                                right: 0,
                                top: '50%',
                                transform: 'translateY(-50%)',
                                zIndex: 1,
                            }}
                        />
                    )}
                </div>
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </div>
    );
}