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 ProfileHeader from '../components/ProfileHeader.js';

const storeProfilePosts = async (profileid, value) => {
    try {
        const jsonValue = JSON.stringify(value)
        await AsyncStorage.setItem('profile_' + profileid, jsonValue)
    } catch (e) {
    }
}

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

let Profile = ({ navigation, route }) => {
    let [Me, setMeProfile] = useState({});
    let [Posts, setPosts] = useState([]);
    let [profile, setProfile] = useState({});

    useEffect(async () => {
        setPosts([]);
        let r = await API.getMe();
        setMeProfile(r);
        if (route.params && route.params.profileid) {
            console.log('Loading Cache Profile:' + route.params.profileid);
            getProfilePosts(route.params.profileid).then(setPosts);
            console.log('Loaded Cache Profile:' + route.params.profileid);
            API.getUserProfile(route.params.profileid).then((profileObj) => {
                let profile = profileObj.profile
                setProfile(profileObj);
                navigation.setOptions({ title: profile.firstName + " " + profile.lastName });
            });
            API.getPosts(route.params.profileid).then((data) => {
                setPosts(data);
                storeProfilePosts(route.params.profileid, data);
                console.log('Store Cache Profile:' + route.params.profileid);
            });
        } else {
            navigation.navigate('Feed')
        }
    }, [route.params]);
    const renderPost = (({ item }) => {
        if (item.nonOrganicType)
            return (<></>);
        return (<Post post={item} viewer={Me} />);
    });
    const header = (
        <View>
            <ProfileHeader profileObj={profile} key={profile._id} />
            <NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />
        </View>
    )

    return (
        <SafeAreaView style={styles.container}>
            <View>
                {Posts.length === 0 && <ActivityIndicator />}
                {Posts.length !== 0 &&
                    <FlatList
                        data={Posts}
                        renderItem={renderPost}
                        keyExtractor={item => item._id || item.createdAt}
                        ListHeaderComponent={header}
                        refreshing={Posts.length === 0}
                        onRefresh={() => {
                            API.getPosts(route.params.profileid).then(setPosts);
                        }}
                    />
                }
            </View>
            <StatusBar style="auto" />
        </SafeAreaView>
    );
}

export default Profile;

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