"use client"; import { useEffect, useState } from "react"; type GalleryImage = { id: number; image: string; }; type GalleryItem = { id: number; title: string; description: string | null; image: string; category: string | null; galleryimage: GalleryImage[]; }; const ITEMS_PER_PAGE = 3; export default function Gallery() { const [gallery, setGallery] = useState([]); const [loading, setLoading] = useState(true); const [currentPage, setCurrentPage] = useState(1); const [activeImages, setActiveImages] = useState< Record >({}); const [lightbox, setLightbox] = useState<{ galleryId: number; imageIndex: number; } | null>(null); const [pageReady, setPageReady] = useState(false); // ========================= // PAGE ANIMATION // ========================= useEffect(() => { const timer = setTimeout(() => { setPageReady(true); }, 80); return () => clearTimeout(timer); }, []); // ========================= // GET GALLERY // ========================= useEffect(() => { const getGallery = async () => { try { const response = await fetch("/api/gallery", { cache: "no-store", }); const result = await response.json(); if (result.success) { setGallery(result.data); } } catch (error) { console.error("GET GALLERY:", error); } finally { setLoading(false); } }; getGallery(); }, []); // ========================= // GET IMAGES // ========================= const getImages = (item: GalleryItem): string[] => { if ( item.galleryimage && item.galleryimage.length > 0 ) { return item.galleryimage.map( (image) => image.image ); } if (item.image) { return [item.image]; } return []; }; // ========================= // CHANGE IMAGE // ========================= const changeImage = ( galleryId: number, direction: number, totalImages: number ) => { if (totalImages <= 1) return; const current = activeImages[galleryId] ?? 0; const next = (current + direction + totalImages) % totalImages; setActiveImages((previous) => ({ ...previous, [galleryId]: next, })); }; // ========================= // SELECT IMAGE // ========================= const selectImage = ( galleryId: number, index: number ) => { setActiveImages((previous) => ({ ...previous, [galleryId]: index, })); }; // ========================= // OPEN LIGHTBOX // ========================= const openLightbox = ( galleryId: number, imageIndex: number ) => { setLightbox({ galleryId, imageIndex, }); }; // ========================= // PAGINATION // ========================= const totalPages = Math.ceil( gallery.length / ITEMS_PER_PAGE ); const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const currentGallery = gallery.slice( startIndex, startIndex + ITEMS_PER_PAGE ); // ========================= // PAGE CHANGE // ========================= const changePage = (page: number) => { setCurrentPage(page); setTimeout(() => { const section = document.getElementById("gallery"); if (section) { window.scrollTo({ top: section.offsetTop - 80, behavior: "smooth", }); } }, 50); }; // ========================= // LOADING // ========================= if (loading) { return ( <> ); } return ( <> {/* ========================================= LIGHTBOX ========================================= */} {lightbox && (
setLightbox(null)} > {(() => { const item = gallery.find( (galleryItem) => galleryItem.id === lightbox.galleryId ); if (!item) return null; const images = getImages(item); const currentLightboxImage = images[lightbox.imageIndex]; return ( <> {`${item.title} event.stopPropagation() } /> {images.length > 1 && ( )} {images.length > 1 && ( )} {lightbox.imageIndex + 1} /{" "} {images.length} ); })()}
)} ); }