import React, { useState, useEffect } from 'react';
import { View, FlatList, ListItem, Button, Avatar } from 'react-native';
import firestore from '@react-native-firebase/firestore';

// Assuming filteredData is your initial data source
const YourComponent = () => {
  const [visibleData, setVisibleData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [lastVisible, setLastVisible] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const querySnapshot = await firestore()
        .collection('your_collection')
        .orderBy('createdAt', 'desc')
        .limit(10)
        .get();

      const newData = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      
      setVisibleData(newData);
      setLastVisible(querySnapshot.docs[querySnapshot.docs.length - 1]);
    } catch (error) {
      console.error('Error fetching data: ', error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchMoreData = async () => {
    setIsLoading(true);
    try {
      const querySnapshot = await firestore()
        .collection('your_collection')
        .orderBy('createdAt', 'desc')
        .startAfter(lastVisible)
        .limit(10)
        .get();

      const newData = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      
      setVisibleData((prevData) => [...prevData, ...newData]);
      setLastVisible(querySnapshot.docs[querySnapshot.docs.length - 1]);
    } catch (error) {
      console.error('Error fetching more data: ', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleEndReached = () => {
    if (!isLoading) {
      fetchMoreData();
    }
  };

  return (
    <FlatList
      data={visibleData}
      keyExtractor={(item) => item.id}
      ListEmptyComponent={() =>
        isLoading ? <EventMenuProduct /> : <NoData />
      }
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.1} // Adjust this threshold as needed
      renderItem={({ item, index }) => (
        <View
          key={index}
          style={{
            alignContent: 'center',
            alignSelf: 'center',
          }}
        >
          {/* Your existing renderItem logic */}
        </View>
      )}
    />
  );
};

export default YourComponent;