style the delete modal

src/components/cubes/DeleteModal.tsx

@@ -0,0 +1,72 @@
+import { DeleteCubeDetails } from "@/interfaces/DeleteCubeDetails";
+export default function DeleteModal({
+  confirmDelete,
+  cancelDelete,
+  cubeData,
+}: {
+  confirmDelete: () => void;
+  cancelDelete: () => void;
+  cubeData: DeleteCubeDetails | null;
+}) {
+  if (!cubeData) return;
+  return (
+    <>
+      <div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen text-black bg-opacity-80 bg-neutral-900">
+        <div className="flex flex-col w-full h-auto gap-3 p-3 m-8 bg-white rounded-lg shadow-lg sm:w-96">
+          <div className="text-lg font-medium text-center">
+            Are you sure you want to delete?
+          </div>
+
+          <div className="px-2 mx-auto font-mono text-center text-black bg-yellow-300 w-fit text-md ">
+            {cubeData.name}
+          </div>
+
+          <div className="flex justify-center gap-2 ">
+            <div className="flex flex-col text-end">
+              <div className="text-black">Category: </div>
+              <div className="text-black">Best time: </div>
+              <div className="text-black">Best Ao5: </div>
+              <div className="text-black">Count: </div>
+            </div>
+
+            <div className="flex flex-col text-start">
+              <div className="w-full overflow-hidden text-black">
+                {cubeData.category}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {cubeData.best}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {cubeData.ao5}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {cubeData.count}
+              </div>
+            </div>
+          </div>
+
+          <div className="w-11/12 mx-auto text-xs text-center">
+            This irreversible action will delete all solve history for this cube
+            and may impact your statistics.
+          </div>
+
+          <div className="flex justify-center w-full h-10 gap-3">
+            <button
+              onClick={cancelDelete}
+              className="px-4 py-2 transition duration-200 rounded-lg bg-neutral-200 text-neutral-900 hover:bg-neutral-300"
+            >
+              Cancel
+            </button>
+
+            <button
+              onClick={confirmDelete}
+              className="px-4 py-2 text-white transition duration-200 bg-red-600 rounded-lg hover:bg-red-700"
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/cubes/Modal.tsx

@@ -5,6 +5,7 @@ import genId from "@/lib/genId";
 import translation from "@/translations/global.json";
 import useModalCube from "@/hooks/useModalCube";
 import { useCubesModalStore } from "@/store/CubesModalStore";
+import DeleteModal from "./DeleteModal";
 
 export default function Modal() {
   const { editingCube } = useCubesModalStore();
@@ -22,7 +23,7 @@ export default function Modal() {
     confirmDelete,
     cancelDelete,
     showDeleteConfirmation,
-    deleteConfirmationMessage,
+    cubeData,
   } = useModalCube();
   return (
     <>
@@ -156,27 +157,11 @@ export default function Modal() {
         </div>
       </div>
       {showDeleteConfirmation && (
-        <div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-opacity-80 bg-neutral-900">
-          <div className="p-4 text-center bg-white rounded-lg shadow-lg">
-            <p className="mb-4 text-lg font-semibold text-neutral-900">
-              {deleteConfirmationMessage}
-            </p>
-            <div className="flex justify-center space-x-4">
-              <button
-                onClick={cancelDelete}
-                className="px-4 py-2 rounded-lg bg-neutral-300 text-neutral-900 hover:bg-neutral-400"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={confirmDelete}
-                className="px-4 py-2 text-white bg-red-600 rounded-lg hover-bg-red-700"
-              >
-                Confirm
-              </button>
-            </div>
-          </div>
-        </div>
+        <DeleteModal
+          confirmDelete={confirmDelete}
+          cancelDelete={cancelDelete}
+          cubeData={cubeData}
+        />
       )}
     </>
   );

src/hooks/useModalCube.ts

@@ -5,6 +5,10 @@ import createCube from "@/lib/createCube";
 import { useTimerStore } from "@/store/timerStore";
 import loadCubes from "@/lib/loadCubes";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
+import calcBestTime from "@/lib/calcBestTime";
+import calcAoStatistics from "@/lib/calcAoStatistics";
+import { DeleteCubeDetails } from "@/interfaces/DeleteCubeDetails";
+import formatTime from "@/lib/formatTime";
 
 export default function useModalCube() {
   const {
@@ -16,11 +20,13 @@ export default function useModalCube() {
     cubeName,
     setCubeName,
   } = useCubesModalStore();
+
   const { lang } = useSettingsModalStore();
-  const { setCubes, setSelectedCube, setNewScramble, selectedCube } = useTimerStore();
+  const { setCubes, setSelectedCube, setNewScramble, selectedCube } =
+    useTimerStore();
   const [error, setError] = useState<boolean>(false);
-  // Add state for the confirmation message
-  const [deleteConfirmationMessage, setDeleteConfirmationMessage] = useState("");
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+  const [cubeData, setCubeData] = useState<DeleteCubeDetails | null>(null);
 
   const handleClickRadio = (category: Categories) => {
     setSelectedCategory(category);
@@ -70,19 +76,31 @@ export default function useModalCube() {
     setSelectedCategory("2x2");
   };
 
-  const handleMessage = () => {
-    const cubeDB = loadCubes();
+  const handleCubeDetails = () => {
     if (!editingCube) return;
-
-      // Get the solve count for the cube
-      const cubeToBeDeleted = cubeDB.find((cube) => cube.id === editingCube.id);
-      const solveCount = cubeToBeDeleted ? cubeToBeDeleted.solves.session.length : 0;
-
-      // Construct the message with the solve count
-      const message = `You have solved this cube ${solveCount} time(s). Are you sure you want to delete it?`;
-      // Show the delete confirmation dialog with the message
-      setDeleteConfirmationMessage(message);
-  }
+    const cubeDB = loadCubes();
+    const cubeToBeDeleted = cubeDB.find((cube) => cube.id === editingCube.id);
+    if (!cubeToBeDeleted) return;
+    const name = cubeToBeDeleted ? cubeToBeDeleted.name : "Undefined";
+    const solveCount = cubeToBeDeleted
+      ? cubeToBeDeleted.solves.session.length +
+        cubeToBeDeleted.solves.all.length
+      : 0;
+    const bestTime = cubeToBeDeleted
+      ? calcBestTime(cubeToBeDeleted.category, cubeToBeDeleted.name)
+      : null;
+    const bestAo = cubeToBeDeleted
+      ? calcAoStatistics(cubeToBeDeleted.category, cubeToBeDeleted.name)
+      : null;
+
+    setCubeData({
+      name: name,
+      category: cubeToBeDeleted.category,
+      count: solveCount,
+      best: bestTime ? formatTime(bestTime.cubeAll) : "--",
+      ao5: bestAo ? formatTime(bestAo.cubeAll.ao5) : "--",
+    });
+  };
 
   const handleDeleteCube = () => {
     const cubeDB = loadCubes();
@@ -109,10 +127,9 @@ export default function useModalCube() {
     setSelectedCategory("2x2");
   };
 
-  const [showDeleteConfirmation,setShowDeleteConfirmation]=useState(false);
   const handleDeleteClick = () => {
     // Show the delete confirmation dialog
-    handleMessage();
+    handleCubeDetails();
     setShowDeleteConfirmation(true);
   };
 
@@ -138,11 +155,10 @@ export default function useModalCube() {
     selectedCategory,
     cubeName,
     lang,
-    handleMessage,
-    deleteConfirmationMessage,
+    cubeData,
     handleDeleteClick,
     confirmDelete,
     cancelDelete,
-    showDeleteConfirmation
+    showDeleteConfirmation,
   };
 }

src/interfaces/DeleteCubeDetails.ts

@@ -0,0 +1,7 @@
+export interface DeleteCubeDetails {
+  name: string;
+  best: any;
+  ao5: any;
+  count: number;
+  category: string;
+}