From f951f270be0edd2cf2a41fdc7b7c2366c5752e15 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:34:54 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP:=20Continuing=20work=20on=20?=
 =?UTF-8?q?the=20Modal=20component=20=F0=9F=94=A7=20Refactoring=20and=20op?=
 =?UTF-8?q?timizing=20code=20=F0=9F=8E=A8=20Updating=20styles=20for=20bett?=
 =?UTF-8?q?er=20UI=20=F0=9F=90=9B=20Fixing=20a=20bug=20related=20to=20phot?=
 =?UTF-8?q?o=20navigation=20=F0=9F=93=9A=20Adding=20comments=20for=20bette?=
 =?UTF-8?q?r=20code=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Modal.tsx                      | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/listing-image-gallery/components/Modal.tsx

diff --git a/src/components/listing-image-gallery/components/Modal.tsx b/src/components/listing-image-gallery/components/Modal.tsx
new file mode 100644
index 0000000..07bd44f
--- /dev/null
+++ b/src/components/listing-image-gallery/components/Modal.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { Dialog } from "@headlessui/react";
+import { motion } from "framer-motion";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRef, useState } from "react";
+import useKeypress from "react-use-keypress";
+import { getNewParam } from "../ListingImageGallery";
+import type { ListingGalleryImage } from "../utils/types";
+import SharedModal from "./SharedModal";
+import { Route } from "next";
+
+export default function Modal({
+  images,
+  onClose,
+}: {
+  images: ListingGalleryImage[];
+  onClose?: () => void;
+}) {
+  let overlayRef = useRef<HTMLDivElement>(null);
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const thisPathname = usePathname();
+  const photoId = searchParams?.get("photoId");
+  let index = Number(photoId);
+
+  const [direction, setDirection] = useState(0);
+  const [curIndex, setCurIndex] = useState(index);
+
+  function handleClose() {
+    onClose && onClose();
+  }
+
+  function changePhotoId(newVal: number) {
+    if (newVal > index) {
+      setDirection(1);
+    } else {
+      setDirection(-1);
+    }
+    setCurIndex(newVal);
+    router.push(`${thisPathname}/?${getNewParam({ value: newVal })}` as Route);
+  }
+
+  useKeypress("ArrowRight", () => {
+    if (index + 1 < images.length) {
+      changePhotoId(index + 1);
+    }
+  });
+
+  useKeypress("ArrowLeft", () => {
+    if (index > 0) {
+      changePhotoId(index - 1);
+    }
+  });
+
+  return (
+    <>
+      <Dialog
+        static
+        open={true}
+        onClose={handleClose}
+        initialFocus={overlayRef}
+        className="fixed inset-0 z-50 flex items-center justify-center "
+      >
+        <Dialog.Overlay
+          ref={overlayRef}
+          as={motion.div}
+          key="backdrop"
+          className="fixed inset-0 z-30 bg-black"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+        />
+        <SharedModal
+          index={curIndex}
+          direction={direction}
+          images={images}
+          changePhotoId={changePhotoId}
+          closeModal={handleClose}
+          navigation={true}
+        />
+      </Dialog>
+    </>
+  );
+}