import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, Image } from 'react-native';
import { ListItem } from 'react-native-elements';
import axios from 'axios';

const OcorrenciasScreen = ({ navigation }) => {
  const [emergencies, setEmergencies] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3000/api/data')
      .then(response => {
        const responseData = response.data;
        const mappedData = responseData.incident.map(item => ({
          id: item.id,
          ocorrencia: item.morada, 
          description: item.desc_classificacao, 
          time: item.hora_alerta,
          data_hora_alerta: item.data_hora_alerta,
          morada: item.morada,
          localidade_morada: item.localidade_morada, 
          desc_classificacao: item.desc_classificacao
        }));
        setEmergencies(mappedData);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []); 

  const renderItem = ({ item }) => (
    <ListItem onPress={() => navigation.navigate('OcorrenciaDetail', { emergency: item })} containerStyle={styles.item}>
      <Image source={require('./../assets/houseFireVector.png')} style={styles.image} />
      <ListItem.Content>
        <ListItem.Title style={styles.title}>{item.ocorrencia}</ListItem.Title>
        <ListItem.Subtitle style={styles.description}>{item.description}</ListItem.Subtitle>
      </ListItem.Content>
      <View style={styles.rightContainer}>
        <Text style={styles.timestamp}>{item.time}</Text>
        <ListItem.Chevron color="" />
      </View>
    </ListItem>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={emergencies}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  item: {
    backgroundColor: '#E0E0E0',
    padding: 20,
    marginVertical: 10,
    marginHorizontal: 20,
    borderColor: '#C0C0C0',
    borderWidth: 1,
    borderRadius: 5,
  },
  title: {
    fontSize: 24,
    paddingBottom: 10,
  },
  description: {
    fontSize: 18,
  },
  rightContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  timestamp: {
    marginRight: 10,
    color: '#888',
  },
  image: {
    width: 75,
    height: 75,
    resizeMode: 'contain',
  },
});

export default OcorrenciasScreen;