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

interface Props {
	isOpen: boolean;
	blankQuestions?: boolean;
	finishingWhat? : string;
	onClose: (next?: boolean) => void;
}

export default function QuestionsModal({ isOpen, onClose, blankQuestions = true, finishingWhat = "module" }: Props) {
	return (
		<Transition show={isOpen} as={Fragment}>
			<Dialog onClose={() => onClose(false)} 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">
							{blankQuestions ? (
								<>
									<Dialog.Title className="font-bold text-xl">Questions Unanswered</Dialog.Title>
									<span>
										Please note that you are finishing the current {finishingWhat} and once you proceed to the next {finishingWhat}, you will no longer be
										able to change the answers of the current one, including your unanswered questions. <br />
										<br />
										Are you sure you want to continue without completing those questions?
									</span>
									<div className="w-full flex justify-between mt-8">
										<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
											Go Back
										</Button>
										<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
											Continue
										</Button>
									</div>
								</>
							): (
								<>
									<Dialog.Title className="font-bold text-xl">Confirm Submission</Dialog.Title>
									<span>
										Please note that you are finishing the current {finishingWhat} and once you proceed to the next {finishingWhat}, you will no longer be
										able to review the answers of the current one. <br />
										<br />
										Are you sure you want to continue?
									</span>
									<div className="w-full flex justify-between mt-8">
										<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
											Go Back
										</Button>
										<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
											Continue
										</Button>
									</div>
								</>
							)}
						</Dialog.Panel>
					</div>
				</Transition.Child>
			</Dialog>
		</Transition>
	);
}