import React, { useEffect, useRef, useState } from 'react';
import { fetchExpenses } from "../../../../APIs/ExpensesApi";

const Expenses = () => {
  const [expensesData, setexpensesData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(0);
  const elements = useRef(null);

  function onIntersection(entries) {
    const firstEntry = entries[0];
    if (firstEntry.isIntersecting && hasMore) {
      fetchMoreItems();
    }
  }

  useEffect(() => {
    const observer = new IntersectionObserver(onIntersection);
    if (elements.current) {
      observer.observe(elements.current);
    }
    return () => {
      observer.disconnect();
    };
  }, [expensesData, hasMore]);

  async function fetchMoreItems() {
    try {
      const response = await fetchExpenses();
      const data = await response.results;
      if (data.length === 0) {
        setHasMore(false);
      } else {
        setexpensesData(prevProducts => [...prevProducts, ...data]);
        setPage(prevPage => prevPage + 1);
      }
    } catch (error) {
      console.error('Error fetching more items:', error);
    }
  }

  return (
    <div>
      {expensesData.map(item => (
        <div key={item.id}>
          <p>{item.id}</p>
        </div>
      ))}

      {hasMore && (
        <div ref={elements}>
          Load More
        </div>
      )}
    </div>
  );
};

export default Expenses;