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;