flip image buttons added with - bug present

src/components/image-toolbar.tsx

@@ -1,32 +1,49 @@
 import React from "react";
-import { DeleteShapeButton } from "@/components/delete-shape-button";
-import { Button } from "@/components/ui/button";
 import { TbFlipHorizontal, TbFlipVertical } from "react-icons/tb";
 import { Toggle } from "@/components/ui/toggle";
 import { useAppDispatch } from "@/hooks";
 import { updateImage } from "@/store/app.slice";
+import ImageOpacityTool from "@/components/image-editing-tools/image-opacity-tool";
+import { Separator } from "@/components/ui/separator";
 
 export function ImageToolbar({ selectedItemId, currentImage }) {
   const dispatch = useAppDispatch();
-  const flipImageVerticaly = (selectedItemId) => {
+  const flipImageVerticaly = () => {
+    const editOffsetY = currentImage.height / 2;
+    const editScaleY = -1 * currentImage.scaleY;
     dispatch(
       updateImage({
         id: selectedItemId,
+        offsetY: editOffsetY,
+        scaleY: editScaleY,
       }),
     );
   };
 
   const flipImageHorizontaly = () => {
-    console.log("Horizontal Flip");
+    const editOffsetX = currentImage.width / 2;
+    const editScaleX = -1 * currentImage.scaleX;
+    dispatch(
+      updateImage({
+        id: selectedItemId,
+        offsetX: editOffsetX,
+        scaleX: editScaleX,
+      }),
+    );
   };
   return (
     <>
-      <Toggle onClick={flipImageVerticaly}>
+      <Toggle onClick={() => flipImageHorizontaly()}>
         <TbFlipVertical />
       </Toggle>
       <Toggle>
-        <TbFlipHorizontal onClick={flipImageHorizontaly} />
+        <TbFlipHorizontal onClick={() => flipImageVerticaly()} />
       </Toggle>
+      <Separator orientation="vertical" />
+      <ImageOpacityTool
+        selectedItemId={selectedItemId}
+        currentImage={currentImage}
+      />
     </>
   );
 }