import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from "react-native";

const Lista = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const getComplaints = async () => {
    try {
      const response = await fetch("http://192.168.7.178:5001/complaints/all");
      const json = await response.json();
      setData(json.Complaints);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text style={{ padding: 8 }}>
              ID:{item.id}, Tipo de denuncia: {item.complaint_type}, Hecha por:{" "}
              {item.name}, en el lugar: {item.place}, descripcion del problema:{" "}
              {item.complaint_description}, estatus:{"En espera"}
            </Text>
          )}
        />
      )}
    </View>
  );
};

export default Lista;