import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js';
import Post from './../components/Post.js';
import NewPost from "./../components/NewPost.js";
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeFeed = async (value) => {
    try {
        const jsonValue = JSON.stringify(value)
        await AsyncStorage.setItem('feed', jsonValue)
    } catch (e) {
    }
}

const getFeed = async () => {
    try {
        const value = await AsyncStorage.getItem('feed')
        if (value !== null) {
            return JSON.parse(value);
        }
    } catch (e) {
        return []
    }
}

let Feed = ({ navigation, route }) => {
    let [Posts, setPosts] = useState([]);
    console.log("Render Feed");
    useEffect(async () => {
        let loggedIn = await API.isLoggedIn();
        if (!loggedIn) return navigation.reset({
            index: 0,
            routes: [{ name: 'Login' }],
        });
        if (route.params && route.params.profileid) {
            return navigation.navigate('Profile', { profileid: route.params.profileid })
        }
        let subscribed = true;
        API.getMe().then((me) => {
            if (subscribed)
                GlobalState.me = me;
        });
        console.log("Feed from cache")
        let cacheFeed = await getFeed() || [];
        if (cacheFeed.length && subscribed) setPosts(cacheFeed);
        console.log("Feed from server")
        let posts = await API.getPosts();
        if (subscribed) {
            setPosts(posts);
            storeFeed(posts);
        }
        console.log("Feed, end useEffect")
        return () => {
            subscribed = false;
        }
    }, [route.params]);
    const renderPost = (({ item }) => {
        if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
            return (<></>);
        return (<Post post={item} />);
    });


    return (

        <SafeAreaView style={styles.container}>
            <View>
                <FlatList
                    data={Posts}
                    renderItem={renderPost}
                    keyExtractor={item => item._id || item.createdAt}
                    ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
                    refreshing={Posts.length === 0}
                    onRefresh={() => {
                        API.getPosts().then(setPosts);
                    }}
                    initialNumToRender={3}
                    maxToRenderPerBatch={3}
                    removeClippedSubviews={true}
                />
            </View>
            <StatusBar style="auto" />
        </SafeAreaView>
    );
}

export default Feed;

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