import { Button, Input } from "antd";
import { useEffect, useState } from "react";

export default function CarouselUrlInput(
    { value, onChange }
        : {
            value?: string[];
            onChange?: (value: string[]) => void;
        }) {
    const [url, setUrl] = useState<string>("");
    const [urls, setUrls] = useState<string[]>(value || []);
    const handleChange = (e) => {
        if (e.target.value !== "") setUrl(e.target.value);
    };
    const handleDelete = (index) => {
        setUrls((prevList) => {
            // 创建一个新数组并移除指定索引的元素
            const newList = [...prevList];
            newList.splice(index, 1);
            return newList;
        });
    };
    useEffect(() => {
        if (value) {
            setUrls(value)
        }
    }, [value])
    useEffect(() => {
        onChange?.(urls);
    }, [urls]);
    return (
        <>
            <div className="w-full flex gap-2">
                <Input className="w-[500px]" placeholder="请输入跳转链接" onChange={handleChange} />
                <Button onClick={() => {
                    if (url) setUrls((prevUrls) => [...prevUrls, url]);
                }} type="primary">添加轮播图链接</Button>
            </div>
            <div>
                <ul>
                    {urls.map((item, index) => (
                        <li className="flex justify-between mt-2 ml-1 p-2 bg-white rounded-lg" key={index}>
                            <Input className="w-4/5" defaultValue={item} disabled />
                            {/* <span className="w-6 block">{item}</span> */}
                            <button className="text-red-500" onClick={() => handleDelete(index)}>删除</button>
                        </li>
                    ))}
                </ul>
            </div>
        </>

    );
}