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 () => {
            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._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}
                style={styles.container}
                ref={flatListRef}
            />
        </SafeAreaView>
    );
}

export default Feed;

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