import { useState } from "react";

interface ToastCard {
	id: number;
	title: string;
	content: string;
}

const MapToastCard2 = () => {
	const [cards, setCards] = useState<ToastCard[]>([]);
	const [openCardId, setOpenCardId] = useState<number | null>(null);

	const addCard = () => {
		const newCard: ToastCard = {
			id: Date.now(),
			title: `Einsatz #${cards.length + 1}`,
			content: `Inhalt von Einsatz #${cards.length + 1}.`,
		};
		setCards([...cards, newCard]);
	};

	const removeCard = (id: number) => {
		setCards(cards.filter((card) => card.id !== id));
	};

	const toggleCard = (id: number) => {
		setOpenCardId(openCardId === id ? null : id);
	};

	return (
		<div className="absolute top-4 right-4 z-[1000] flex flex-col space-y-4">
			{/* DEBUG */}
			<button
				onClick={addCard}
				className="mb-4 p-2 bg-blue-500 text-white rounded self-end"
			>
				Debug Einsatz
			</button>
			{/* DEBUG */}
			{cards.map((card) => (
				<div
					key={card.id}
					className="collapse collapse-arrow bg-base-100 border-base-300 border w-120 relative"
				>
					<input
						type="checkbox"
						className="absolute top-0 left-0 opacity-0"
						checked={openCardId === card.id}
						onChange={() => toggleCard(card.id)}
					/>
					<div className="collapse-title font-semibold flex justify-between items-center">
						<span>{card.title}</span>
						<button
							className="btn btn-sm btn-circle btn-ghost z-10 absolute top-3.5 right-8"
							onClick={(e) => {
								removeCard(card.id);
							}}
						>
							✕
						</button>
					</div>
					<div className="collapse-content text-sm">{card.content}</div>
				</div>
			))}
		</div>
	);
};

export default MapToastCard2;