import Button from "@/components/Low/Button";
import { Module } from "@/interfaces";
import useExamEditorStore from "@/stores/examEditor";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { capitalize } from "lodash";
import React, { Fragment, useCallback, useEffect, useState } from "react";

interface Props {
    module: Module;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
    setNumberOfLevelParts: React.Dispatch<React.SetStateAction<number>>;
}

const ResetModule: React.FC<Props> = ({ module, isOpen, setIsOpen, setNumberOfLevelParts }) => {
    const [isClosing, setIsClosing] = useState(false);
    const [mounted, setMounted] = useState(false);
    const { dispatch } = useExamEditorStore();

    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);
        setIsOpen(!isOpen);

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

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

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

    const handleResetModule = () => {
        dispatch({ type: 'RESET_MODULE', payload: { module } });
        setIsOpen(false);
        if (module === "level") {
            setNumberOfLevelParts(1);
        }
    }

    return (
        <Transition
            show={isOpen}
            as={Fragment}
            beforeEnter={() => setIsClosing(false)}
            beforeLeave={() => setIsClosing(true)}
            afterLeave={() => {
                setIsClosing(false);
                setMounted(false);
            }}
        >
            <Dialog onClose={() => blockMultipleClicksClose()} className="relative z-50">
                <TransitionChild
                    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" />
                </TransitionChild>

                <TransitionChild
                    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">
                        <DialogPanel className={`bg-ielts-${module}-light w-full max-w-xl h-fit p-8 rounded-xl flex flex-col gap-4`}>
                            <DialogTitle className="flex font-bold text-xl justify-center text-gray-700"><span>Reset {capitalize(module)} Module</span></DialogTitle>
                            <div className="flex flex-col w-full mt-4 gap-6">
                                <div className="bg-gray-50 rounded-lg p-4">
                                    <p className="text-gray-600">
                                        Do you want to reset the {module} module? 
                                    </p>
                                    <br/>
                                    <p className="text-gray-600 font-bold">This will reset all the current data in the {module} module and cannot be undone.</p>
                                </div>
                                <div className="w-full flex justify-between mt-4 gap-8">
                                    <Button color="purple" onClick={blockMultipleClicksClose} variant="outline" className="self-end w-full bg-white">
                                        Cancel
                                    </Button>

                                    <Button color="purple" onClick={handleResetModule} variant="solid" className="self-end w-full">
                                        Reset
                                    </Button>
                                </div>
                            </div>
                        </DialogPanel>
                    </div>
                </TransitionChild>
            </Dialog>
        </Transition>
    );
}

export default ResetModule;