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

interface Props {
	isOpen: boolean;
	onClose: () => void;
}

export default function TimerEndedModal({ isOpen, onClose }: 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(() => {
		if (isClosing) return;

		setIsClosing(true);
		onClose();

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

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

	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()} 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">Time&apos;s up!</Dialog.Title>
							<span>
								The timer has ended! Your answers have been registered and saved, you will now move on to the next module (or to the
								finish screen, if this was the last one).
							</span>
							<Button color="purple" onClick={()=> blockMultipleClicksClose()} className="max-w-[200px] self-end w-full mt-8">
								Continue
							</Button>
						</Dialog.Panel>
					</div>
				</Transition.Child>
			</Dialog>
		</Transition>
	);
}