ENCOA-295

src/components/ExamEditor/Standalone/ResetModule.tsx

@@ -0,0 +1,116 @@
+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);
+        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;