'use client';

import InfiniteScroll from 'react-infinite-scroller';
import Grid from './ui/Grid';
import GalleryItem from './GalleryItem';
import {
  products,
  userLikedProducts as userLikedProductsSchema,
} from '@/lib/db/schema';
import { Skeleton } from '@nextui-org/react';
import { toast } from 'sonner';
import { getGalleryItems } from '@/app/actions';
import { useState } from 'react';

export const dynamic = 'force-dynamic'

const Loader = (
  <Grid className="mt-6">
    {new Array(3).fill(0).map((_, i) => {
      return <Skeleton key={i} className="h-[300px] w-auto rounded-xl" />;
    })}
  </Grid>
);

const InfiniteGridGallery = ({
  userLikedProducts,
}: {
  userLikedProducts: Array<typeof userLikedProductsSchema.$inferSelect>;
}) => {
  const [items, setItems] = useState<Array<typeof products.$inferSelect>>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const fetchItems = async () => {
    if (loading) return;

    setLoading(true);

    try {
      const products = await getGalleryItems(currentPage, 9);
      if (products.length === 0) {
        setHasMore(false);
      } else {
        setItems([...items, ...products]);
        setCurrentPage(currentPage + 1);
      }
    } catch (err: any) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <InfiniteScroll loadMore={fetchItems} hasMore={hasMore} loader={Loader}>
      <Grid>
        {items.map((item, i) => (
          <GalleryItem
            key={i}
            item={item}
            likedByUser={
              userLikedProducts.filter(
                (product) => product.productId === item.id,
              ).length > 0
            }
          />
        ))}
      </Grid>
    </InfiniteScroll>
  );
};

export default InfiniteGridGallery;