marco.pms.web/src/hooks/useImageGallery.js

import { useState, useCallback } from "react";
// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";

const PAGE_SIZE = 10;

const useImageGallery = (selectedProjectId) => {
  const [images, setImages] = useState([]);
  const [allImagesData, setAllImagesData] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);

  const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
    if (!selectedProjectId) return;

    try {
      if (page === 1) {
        setLoading(true);
      } else {
        setLoadingMore(true);
      }

      const res = await ImageGalleryAPI.ImagesGet(
        selectedProjectId,
        filters,
        page,
        PAGE_SIZE
      );

      const newBatches = res.data || [];
      const receivedCount = newBatches.length;

      setImages((prev) => {
        if (page === 1 || reset) return newBatches;
        const uniqueNew = newBatches.filter(
          (batch) => !prev.some((b) => b.batchId === batch.batchId)
        );
        return [...prev, ...uniqueNew];
      });

      setAllImagesData((prev) => {
        if (page === 1 || reset) return newBatches;
        const uniqueAll = newBatches.filter(
          (batch) => !prev.some((b) => b.batchId === batch.batchId)
        );
        return [...prev, ...uniqueAll];
      });

      setHasMore(receivedCount === PAGE_SIZE);
    } catch (error) {
      console.error("Error fetching images:", error);
      if (page === 1) {
        setImages([]);
        setAllImagesData([]);
      }
      setHasMore(false);
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  }, [selectedProjectId]);

  const resetGallery = useCallback(() => {
    setImages([]);
    setAllImagesData([]);
    setPageNumber(1);
    setHasMore(true);
  }, []);

  return {
    images,
    allImagesData,
    pageNumber,
    setPageNumber,
    hasMore,
    loading,
    loadingMore,
    fetchImages,
    resetGallery,
  };
};

export default useImageGallery;