From 1e190ad739ebe137ac12f8e23216c288a76d39db Mon Sep 17 00:00:00 2001
From: Bryan Lundberg <bryanlundberg@outlook.com>
Date: Sat, 14 Sep 2024 06:17:47 -0600
Subject: [PATCH] added functions to handle solve options

---
 .../menu-solve-options/menu-solve-options.tsx | 105 ++++++++++++++++++
 .../sheet-solve-details/SheetSolveDetails.tsx |  74 ++----------
 src/components/solves/SolvesArea.tsx          |   2 +-
 3 files changed, 118 insertions(+), 63 deletions(-)
 create mode 100644 src/components/menu-solve-options/menu-solve-options.tsx

diff --git a/src/components/menu-solve-options/menu-solve-options.tsx b/src/components/menu-solve-options/menu-solve-options.tsx
new file mode 100644
index 00000000..e61486a8
--- /dev/null
+++ b/src/components/menu-solve-options/menu-solve-options.tsx
@@ -0,0 +1,105 @@
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Solve } from "@/interfaces/Solve";
+import updateSolve from "@/lib/updateSolve";
+import { useTimerStore } from "@/store/timerStore";
+import { BookmarkIcon, CopyIcon, Cross1Icon } from "@radix-ui/react-icons";
+
+export default function MenuSolveOptions({ solve }: { solve: Solve | null }) {
+  const { selectedCube, cubes, mergeUpdateSelectedCube } = useTimerStore();
+  if (!solve && !selectedCube) return null;
+
+  const handleDeleteSolve = async () => {
+    if (solve && selectedCube) {
+      const updatedCube = await updateSolve({
+        solveId: solve.id,
+        selectedCube: selectedCube,
+        type: "DELETE",
+      });
+      mergeUpdateSelectedCube(updatedCube, cubes);
+    }
+  };
+
+  const handlePenaltyPlus2 = async () => {
+    if (solve && selectedCube) {
+      const updatedCube = await updateSolve({
+        solveId: solve.id,
+        selectedCube: selectedCube,
+        type: "+2",
+      });
+      mergeUpdateSelectedCube(updatedCube, cubes);
+    }
+  };
+
+  const handleBookmarkSolve = async () => {
+    if (solve && selectedCube) {
+      const updatedCube = await updateSolve({
+        solveId: solve.id,
+        selectedCube: selectedCube,
+        type: "BOOKMARK",
+      });
+      mergeUpdateSelectedCube(updatedCube, cubes);
+    }
+  };
+
+  const handleClipboardSolve = () => {};
+
+  return (
+    <>
+      {/* options */}
+      <div className="flex items-center justify-center pt-5 gap-2">
+        <TooltipProvider delayDuration={100}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant={"ghost"} onClick={handleDeleteSolve}>
+                <Cross1Icon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Delete</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={"ghost"}
+                className="font-light text-md"
+                onClick={handlePenaltyPlus2}
+              >
+                +2
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>+2 Penalty</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant={"ghost"} onClick={handleBookmarkSolve}>
+                <BookmarkIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Bookmark</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant={"ghost"}>
+                <CopyIcon />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Copy</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx b/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
index e86c03f1..388a2e99 100644
--- a/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
+++ b/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
@@ -1,29 +1,18 @@
+import MenuSolveOptions from "@/components/menu-solve-options/menu-solve-options";
 import { ScrambleDisplay } from "@/components/scramble-display";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
 import {
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import formatTime from "@/lib/formatTime";
 import { useDialogSolve } from "@/store/DialogSolve";
 import { useTimerStore } from "@/store/timerStore";
 import {
-  BookmarkIcon,
   CalendarIcon,
   ClockIcon,
   CodeSandboxLogoIcon,
-  CopyIcon,
-  TrashIcon,
 } from "@radix-ui/react-icons";
 import { DateTime } from "luxon";
 import { useLocale } from "next-intl";
@@ -56,9 +45,14 @@ export default function SheetSolveDetails() {
           visualization="3D"
         />
 
-        <p className="font-black text-5xl text-center mx-auto pt-5 relative">
-          {formatTime(solve?.time || 0)}
-        </p>
+        <div className="tracking-wider font-black  text-center mx-auto pt-5">
+          <span className="text-5xl">
+            {formatTime(solve?.time || 0).split(".")[0]}
+          </span>
+          <span className="text-4xl">
+            .{formatTime(solve?.time || 0).split(".")[1]}
+          </span>
+        </div>
 
         <div className="flex justify-center gap-2 text-xs">
           <p className="flex items-center justify-center gap-1">
@@ -76,56 +70,12 @@ export default function SheetSolveDetails() {
         </div>
 
         {/* comment */}
-        <div className="pt-5 flex justify-start flex-col">
+        {/* <div className="pt-5 flex justify-start flex-col">
           <Label className="text-start">Comment</Label>
           <Textarea className="mt-3 resize-none h-40" />
-        </div>
+        </div> */}
 
-        {/* options */}
-        <div className="flex items-center justify-center pt-5 gap-2">
-          <TooltipProvider delayDuration={100}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant={"destructive"} className="me-10">
-                  <TrashIcon className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Delete</p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant={"ghost"} className="font-light text-md">
-                  +2
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>+2 Penalty</p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant={"ghost"}>
-                  <BookmarkIcon className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Bookmark</p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant={"ghost"}>
-                  <CopyIcon className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Copy</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
+        <MenuSolveOptions solve={solve} />
 
         <Image
           src={"/brand_logo.svg"}
diff --git a/src/components/solves/SolvesArea.tsx b/src/components/solves/SolvesArea.tsx
index 2f8c21d0..9ddfdb69 100644
--- a/src/components/solves/SolvesArea.tsx
+++ b/src/components/solves/SolvesArea.tsx
@@ -85,7 +85,7 @@ export function SolvesArea({ displaySolves }: SolvesArea) {
     <VirtualizedGrid
       itemCount={sortedSolves.length}
       rowHeight={60}
-      cellWidth={150}
+      cellWidth={120}
       gridGap={10}
       className="pb-52"
     >