import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useCallback, useEffect, useState } from "react";
import Button from "./Low/Button";

interface Props {
	isOpen: boolean;
	abandonPopupTitle: string;
	abandonPopupDescription: string;
	abandonConfirmButtonText: string;
	onAbandon: () => void;
	onCancel: () => void;
}

export default function AbandonPopup({ isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel }: Props) {
	const [isClosing, setIsClosing] = useState(false);
	const [mounted, setMounted] = useState(false);

	useEffect(() => {
		if (isOpen) {
			setMounted(true);
		}
	}, [isOpen]);

	useEffect(() => {
		if (!isOpen && mounted) {
			const timer = setTimeout(() => {
				setMounted(false);
				setIsClosing(false);
			}, 300);
			return () => clearTimeout(timer);
		}
	}, [isOpen, mounted]);

	const blockMultipleClicksClose = useCallback((cancel: boolean) => {
		if (isClosing) return;

		setIsClosing(true);
		const func = cancel ? onCancel : onAbandon;
		func();

		const timer = setTimeout(() => {
			setIsClosing(false);
		}, 300);

		return () => clearTimeout(timer);
	}, [isClosing, onCancel, onAbandon]);

	if (!mounted && !isOpen) return null;

	return (
		<Transition
			show={isOpen}
			as={Fragment}
			beforeEnter={() => setIsClosing(false)}
			beforeLeave={() => setIsClosing(true)}
			afterLeave={() => {
				setIsClosing(false);
				setMounted(false);
			}}
		>
			<Dialog onClose={() => blockMultipleClicksClose(true)} className="relative z-50">
				<Transition.Child
					as={Fragment}
					enter="ease-out duration-300"
					enterFrom="opacity-0"
					enterTo="opacity-100"
					leave="ease-in duration-200"
					leaveFrom="opacity-100"
					leaveTo="opacity-0">
					<div className="fixed inset-0 bg-black/30" />
				</Transition.Child>

				<Transition.Child
					as={Fragment}
					enter="ease-out duration-300"
					enterFrom="opacity-0 scale-95"
					enterTo="opacity-100 scale-100"
					leave="ease-in duration-200"
					leaveFrom="opacity-100 scale-100"
					leaveTo="opacity-0 scale-95">
					<div className="fixed inset-0 flex items-center justify-center p-4">
						<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
							<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
							<span>{abandonPopupDescription}</span>
							<div className="w-full flex justify-between mt-8">
								<Button color="purple" onClick={() => blockMultipleClicksClose(true)} variant="outline" className="max-w-[200px] self-end w-full">
									Cancel
								</Button>
								<Button color="purple" onClick={() => blockMultipleClicksClose(false)} className="max-w-[200px] self-end w-full">
									{abandonConfirmButtonText}
								</Button>
							</div>
						</Dialog.Panel>
					</div>
				</Transition.Child>
			</Dialog>
		</Transition>
	);
}