import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import { Card } from 'react-native-paper';
import API from './../API.js';
import Post from './../components/Post.js';
import Moment from 'moment';


let LoadPost = ({ postid, viewer }) => {
    let [post, setPost] = useState({});
    useEffect(async () => {
        setPost(await API.getPost(postid));
    }, [postid]);
    return (post._id ? <Post post={post} viewer={viewer} /> : null);
};

let Notifications = ({ navigation, route }) => {
    let [Me, setMeProfile] = useState({});
    let [notifications, setNotifications] = useState([]);
    useEffect(async () => {
        let r = await API.getMe();
        setMeProfile(r);
        setNotifications(r.notifications)
    }, [route.params]);
    const renderNotification = (({ item }) => {
        //return (<LoadPost postid={item.postid} viewer={Me} />);
        const gotToPost = () => {
            navigation.navigate('SinglePost', { postid: item.postid, viewer: Me });
        };
        return (
            <Card style={{ margin: 3 }} onPress={gotToPost}>
                <Card.Content>
                    <Text>{item.body}</Text>
                    <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                        {" " + Moment(item.ts).fromNow()}
                    </Text>
                </Card.Content>
            </Card>
        )
    });


    return (
        <SafeAreaView style={styles.container}>
            <View>
                <FlatList
                    data={notifications.reverse().slice(0, 10)}
                    renderItem={renderNotification}
                    keyExtractor={item => item.ts}
                />
            </View>
            <StatusBar style="auto" />
        </SafeAreaView>
    );
}

export default Notifications;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#edf2f7",
    },
});