From 5c413d466b8a42524f0bc178cb08eb49f3456f59 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Thu, 5 Jun 2025 19:46:58 +0200
Subject: [PATCH] Add dialog for delete confirmation

---
 .../Profile/Subcomponents/GalleryForm.tsx     | 95 +++++++++++++------
 1 file changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/Components/Profile/Subcomponents/GalleryForm.tsx b/src/Components/Profile/Subcomponents/GalleryForm.tsx
index ad5a3ae8..db2b4151 100644
--- a/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryForm.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 
 import { useAppState } from '#components/AppShell/hooks/useAppState'
+import DialogModal from '#components/Templates/DialogModal'
 
 import type { FormState } from '#types/FormState'
 
@@ -24,6 +25,10 @@ export const GalleryForm = ({ state, setState }: Props) => {
 
   const [uploadingImages, setUploadingImages] = useState<File[]>([])
 
+  const [deleteModalImage, setDeleteModalImage] = useState<number | null>(null)
+
+  const closeModal = () => setDeleteModalImage(null)
+
   const upload = async (acceptedFiles: File[]) => {
     setUploadingImages((files) => [...files, ...acceptedFiles])
 
@@ -82,38 +87,66 @@ export const GalleryForm = ({ state, setState }: Props) => {
   }
 
   return (
-    <div className='tw:flex tw:flex-wrap tw:gap-4 tw:my-4'>
-      {images.map((image, index) => (
-        <div key={index} className='tw:relative'>
-          <img
-            src={image.src}
-            alt={`Gallery image ${index + 1}`}
-            className={`tw:w-60 tw:h-60 tw:object-cover tw:rounded-lg ${
-              image.state === 'uploading' ? 'tw:opacity-50' : ''
-            }`}
-          />
-          {image.state === 'uploading' && (
-            <span className='tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto'></span>
-          )}
-          {image.state === 'uploaded' && (
-            <button
-              className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600'
-              onClick={() => removeImage(index)}
-              type='button'
-            >
-              <TrashIcon className='tw:h-5 tw:w-5' />
-            </button>
-          )}
-        </div>
-      ))}
+    <>
+      <div className='tw:flex tw:flex-wrap tw:gap-4 tw:my-4'>
+        {images.map((image, index) => (
+          <div key={index} className='tw:relative'>
+            <img
+              src={image.src}
+              alt={`Gallery image ${index + 1}`}
+              className={`tw:w-60 tw:h-60 tw:object-cover tw:rounded-lg ${
+                image.state === 'uploading' ? 'tw:opacity-50' : ''
+              }`}
+            />
+            {image.state === 'uploading' && (
+              <span className='tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto'></span>
+            )}
+            {image.state === 'uploaded' && (
+              <button
+                className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600'
+                onClick={() => setDeleteModalImage(index)}
+                type='button'
+              >
+                <TrashIcon className='tw:h-5 tw:w-5' />
+              </button>
+            )}
+          </div>
+        ))}
 
-      <div
-        {...getRootProps()}
-        className='tw:flex tw:center tw:w-60 tw:h-60 tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg'
-      >
-        <input {...getInputProps()} />
-        <ArrowUpTrayIcon className='tw:h-8 tw:w-8 tw:m-auto' />
+        <div
+          {...getRootProps()}
+          className='tw:flex tw:center tw:w-60 tw:h-60 tw:cursor-pointer tw:border tw:border-dashed tw:border-gray-300 tw:p-4 tw:rounded-lg'
+        >
+          <input {...getInputProps()} />
+          <ArrowUpTrayIcon className='tw:h-8 tw:w-8 tw:m-auto' />
+        </div>
       </div>
-    </div>
+      <DialogModal
+        isOpened={!!deleteModalImage}
+        title='Are you sure?'
+        showCloseButton={false}
+        onClose={closeModal}
+      >
+        <div onClick={(e) => e.stopPropagation()}>
+          <span>Do you want to delete this image?</span>
+          <div className='tw:grid'>
+            <div className='tw:flex tw:justify-between'>
+              <label
+                className='tw:btn tw:mt-4 tw:btn-error'
+                onClick={() => {
+                  deleteModalImage && removeImage(deleteModalImage)
+                  closeModal()
+                }}
+              >
+                Yes
+              </label>
+              <label className='tw:btn tw:mt-4' onClick={closeModal}>
+                No
+              </label>
+            </div>
+          </div>
+        </div>
+      </DialogModal>
+    </>
   )
 }