import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js';
import Post from './../components/Post.js';
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([]);
    const flatListRef = React.useRef()
    console.log("Render Feed");
    useEffect(() => {
        let subscribed = true;
        const getData = async () => {
            // TODO: Check for internet connection
            const internet = true;
            if(internet){
                //byPass and load
                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 })
                }
            }
            if(!route.params?.reRender){
                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")
            }
            flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
            let posts = await API.getPosts();
            if (subscribed) {
                setPosts(posts);
                storeFeed(posts);
            }
            console.log("Feed, end useEffect")

        }
        getData()
        return () => {
            subscribed = false;
        }
    }, [route.params]);
    const renderPost = (({ item }) => {
        if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
            return (<></>);
        return (<Post post={item} />); 
    });


    return (
        <SafeAreaView>
            <FlatList
                data={Posts}
                renderItem={renderPost}
                keyExtractor={item => item.lastUpdated || item._id  || item.ceatedAt} //This may refresh the component
                //ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
                refreshing={Posts.length === 0}
                onRefresh={() => {
                    API.getPosts().then(setPosts);
                }}
                initialNumToRender={3}
                maxToRenderPerBatch={3}
                removeClippedSubviews={true}
                style={styles.container}
                ref={flatListRef}
            />
        </SafeAreaView>
    );
}

export default Feed;

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