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

import Screen from "../components/Screen";
import {
  ListItem,
  ListItemDeleteAction,
  ListItemSeparator,
} from "../components/lists";

import colors from "../config/colors";
import { AntDesign } from '@expo/vector-icons';

/*const initialMessages = [
  {
    id: 1,
    title: "Defesa Civil",
    description: "Enviado um aviso de chuvas intensas na região do M'Boi Mirim. Há possibilidade ...",
    image: require("../assets/defesa_civil.png"),
  },
  {
    id: 2,
    title: "Defesa Civil",
    description:
      "Enviado um aviso de alagamento na região de Pinheiros. Há possibilidade de alagamentos. Evite a região.",
    image: require("../assets/defesa_civil.png"),
  },
];*/

function MessagesScreen(props) {
  /*const [messages, setMessages] = useState(initialMessages);
  const [refreshing, setRefreshing] = useState(false);

  const handleDelete = (message) => {
    setMessages(messages.filter((m) => m.id !== message.id));
  }; */

  return (
    {/*<Screen>
      <FlatList
        data={messages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
            subTitle={item.description}
            image={item.image}
            onPress={() => console.log("Message selected", item)}
            renderRightActions={() => (
              <ListItemDeleteAction onPress={() => handleDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeparator}
        refreshing={refreshing}
        onRefresh={() => {
          setMessages([
            {
              id: 2,
              title: "T2",
              description: "D2",
              image: require("../assets/ddangelorb.png"),
            },
          ]);
        }}
      />
      </Screen>*/},
    <Screen style={styles.screen}>
      <View style={styles.container}>
        <AntDesign name="warning" size={60} color="black" />
        <Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  screen: {
    backgroundColor: colors.light,
  },
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start"

  },
});

export default MessagesScreen;