text: import React, {useEffect, useState} from 'react';
  import {View, FlatList, Image, Text, TouchableOpacity} from 'react-native';
  import {useNavigation} from '@react-navigation/native';
  import api from '../../services/api';
  
  import logoImg from '../../assets/logo.png';
  import styles from './styles';
  import { Feather } from '@expo/vector-icons';
  
  
  
  export default function Incidents(){
      const [incidents, setIncidents] = useState([]);
      const [total, setTotal] = useState(0);
      const [page, setPage] = useState(1);
      const navigation = useNavigation();
      const [loading, setLoading] = useState(false);
     
      function navigateToDetail(incident){
          navigation.navigate('Detail', {incident});
      }
  
      async function loadIncidents(){
          if(loading){
              return;
          }
          if(total>0 && incidents.length == total){
              return;
          }
  
          setLoading(true);
          const response = await api.get(`incidents?page=${page}`);
          
          setTotal(response.headers['x-total-count']);
          setIncidents([...incidents, ...response.data]);
          setPage(page+1);
          setLoading(false);
      
      }
  
      useEffect(()=> {
          loadIncidents();
  
      }, []);
  
    
      return (
          <View style={styles.container}>
              <View style={styles.header}>
                  <Image source={logoImg}/>
                  <Text style={styles.headerText}>
                      Total de <Text style={styles.headerTextBold}>{total} casos</Text>.
                  </Text>
              </View>
              <Text style={styles.title}>Bem-vindo!</Text>
              <Text style={styles.description}>Escolha um dos casos abaixo e salve o dia.</Text>
              <FlatList
                  style={styles.incidentLists}
                  keyExtractor={incident => String(incident.id)}
                  showsVerticalScrollIndicator={true}
                  onEndReached={loadIncidents}
                  onEndReachedThreshold={0.2}
                  
                  data={incidents}
                  renderItem={({item: incident})=> (
                      <View style={styles.incidentLists}>
                          <View style={styles.incident}>
                              <Text style={styles.incidentProperty}>ONG:</Text>
                              <Text style={styles.incidentValue}>{incident.name}</Text>
                              <Text style={styles.incidentProperty}>CASO:</Text>
                              <Text style={styles.incidentValue}>{incident.title}</Text>
                              <Text style={styles.incidentProperty}>VALOR:</Text>
                              <Text style={styles.incidentValue}>{Intl.NumberFormat('pt-BR', {
                              style: 'currency', currency: 'BRL'}).format(incident.value)}</Text>
                              <TouchableOpacity style={styles.detailsButton} onPress={()=>navigateToDetail(incident)}>
                                  <Text style={styles.detailsButtonText}>Ver mais detalhes</Text>
                                  <Feather name="arrow-right" size={16} color="#E02041"/>
                              </TouchableOpacity>
                          </View>
                              
                      </View>
                      
                  )}
              />
          </View>
      );
  }