import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import { Reorder } from "framer-motion";
import React, { useEffect, useState } from "react";
import { Input, Button, Form, Typography } from "antd";
import type { InputProps } from "antd";
import { UUIDGenerator } from "@nice/common";

interface ArrayFieldProps {
	name: string;
	label: string;
	placeholder?: string;
	addButtonText?: string;
	inputProps?: Partial<InputProps>;
}

type ItemType = { id: string; value: string };

export function FormArrayField({
	name,
	label,
	placeholder,
	addButtonText = "添加项目",
	inputProps = {},
}: ArrayFieldProps) {
	const [items, setItems] = useState<ItemType[]>([]);

	const updateItems = (newItems: ItemType[]) => {
		setItems(newItems);
	};
	useEffect(() => {
		console.log(items)
	})
	return (
		
		<Form.List name={name}>
			{(fields, { add, remove }, { errors }) => (
				<Form.Item label={label}>
					<div className="space-y-3">
						<Reorder.Group
							axis="y"
							values={items}
							onReorder={updateItems}
							className="space-y-3">
							{fields.map((field, index) => (
								<Reorder.Item 
									key={items[index]?.id || field.key}
									value={
										items[index] || {
											id: field.key,
											value: "",
										}
									}
									initial={{ opacity: 0, y: -20 }}
									animate={{ opacity: 1, y: 0 }}
									exit={{ opacity: 0, y: -20 }}>
									<div className="relative flex items-center group space-y-1">
										<Form.Item
											{...field}
											validateTrigger={[
												"onChange",
												"onBlur",
											]}
											rules={[
												{
													required: true,
													whitespace: true,
													message:
														"请输入内容或删除此项",
												},
											]}
											noStyle>
											<Input
												{...inputProps}
												placeholder={placeholder}
												style={{ width: "100%" }}
												onChange={(e) => {
													// 更新 items 状态
													const newItems = [...items];
													if (!newItems[index]) {
														newItems[index] = {
															id: field.key.toString(),
															value: e.target
																.value,
														};
													} else {
														newItems[index].value =
															e.target.value;
													}
													setItems(newItems);
												}}
											/>
											
										</Form.Item>
										
										<Button
											type="text"
											icon={<DeleteOutlined />}
											danger
											className="ml-2 opacity-0 group-hover:opacity-100"
											onClick={() => {
												remove(field.name);
												setItems(
													items.filter(
														(_, i) => i !== index
													)
												);
											}}
										/>
										
									</div>
								</Reorder.Item>
							))}
						</Reorder.Group>
						
						<div className="w-4/5 flex justify-center items-center -translate-y-">
							<Button
								type="primary"
								ghost
								block={true}
								icon={<PlusOutlined />}
								onClick={() => {
									add();
									setItems([
										...items,
										{ id: UUIDGenerator.generate(), value: "" },
									]);
								}}>
								{addButtonText}
							</Button>
						</div>
					</div>
				</Form.Item>
			)}
		</Form.List>
	);
}
