import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import { Card } from 'react-native-paper';
import SinglePost from '../components/SinglePostComponent';
import Moment from 'moment';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import API from '../API.js';
import { useFocusEffect } from '@react-navigation/native';

let NotificationsView = ({ navigation, route }) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;

    useFocusEffect(
        React.useCallback(() => {
            let active = true;
            const markViewed = async () => {
                const notifications = Array.isArray(viewer?.notifications) ? viewer.notifications : [];
                const hasUnviewed = notifications.some((n) => n && n.viewed !== true);
                if (!hasUnviewed) return;
                const result = await API.markNotificationsViewed();
                if (!active || result?.status !== "ok") return;
                if (!GlobalState.me.notifications) GlobalState.me.notifications = [];
                GlobalState.me.notifications = GlobalState.me.notifications.map((n) => ({ ...n, viewed: true }));
            };
            markViewed();
            return () => {
                active = false;
            };
        }, [viewer?.notifications?.length])
    );

    const renderNotification =  (({ item }) => {
        const gotToPost = () => {
            navigation.navigate('SinglePost', { postid: item.postid });
        };
        return (
            <Card style={{ margin: 3 }} onPress={gotToPost}>
                <Card.Content>
                    <Text style={{ fontWeight: item.viewed ? 'normal' : '700' }}>{item.body}</Text>
                    <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                        {" " + Moment(item.ts).fromNow()}
                    </Text>
                    <SinglePost postId={item.postid} hideComments={true} />
                </Card.Content>
            </Card>
        )
    });


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

export default NotificationsView;

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