import { useEffect, useState } from "react";
// import UncoverAvatarUploader from "../uploader/UncoverAvatarUploader ";
import { Upload, Progress, Button, Image, Form } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import AvatarUploader from "./AvatarUploader";
import { isEqual } from 'lodash';

interface MultiAvatarUploaderProps {
    value?: string[];
    onChange?: (value: string[]) => void;
}

export function MultiAvatarUploader({
    value,
    onChange,
}: MultiAvatarUploaderProps) {
    const [imageList, setImageList] = useState<string[]>(value || [])
    const [previewImage, setPreviewImage] = useState<string>("");
    useEffect(() => {
        if (!isEqual(value, imageList)) {
            setImageList(value || []);
        }
    }, [value]);
    useEffect(() => {
        onChange?.(imageList)
    }, [imageList])
    return <>
        <div className="flex gap-2 mb-2" style={{ width: "1200px" }}>
            {imageList.map((image, index) => {
                return (
                    <div className="mr-2px relative" key={index} style={{ width: "200px", height: "100px" }} >
                        <Image alt="" style={{ width: "200px", height: "100px" }} src={image}
                            preview={{
                                visible: previewImage === image,
                                onVisibleChange: (visible) =>
                                    setPreviewImage(visible ? image || "" : "")
                            }} >
                        </Image>
                        <Button
                            type="text"
                            danger
                            icon={<DeleteOutlined className="text-red" />}
                            onClick={() => image && setImageList(imageList.filter((_, i) => i !== index))}
                            style={{
                                position: "absolute", // 绝对定位
                                top: "0", // 顶部对齐
                                right: "0", // 右侧对齐
                                zIndex: 1, // 确保按钮在图片上方
                                padding: "4px", // 调整按钮内边距
                                backgroundColor: "rgba(255, 255, 255, 0.2)", // 半透明背景
                                borderRadius: "50%", // 圆形按钮
                            }}

                        />
                    </div>
                )
            })}
        </div>
        <div className="flex">
            <AvatarUploader showCover={false} successText={'轮播图上传成功'} onChange={(value) => {
                console.log(value);
                setImageList([...imageList, value])
            }}></AvatarUploader>
        </div>

    </>;
}
export default MultiAvatarUploader;