import { View, Text } from "../../../components/Themed";
import { ListRenderItemInfo, StyleSheet } from "react-native";
import Colors from "../../../constants/Colors";
import { useContext, useEffect, useState } from "react";
import { getUserPosts } from "../../../components/backend";
import { FlatList, RefreshControl } from "@gluestack-ui/themed";
import global from "../../../constants/global";
import { UserFeedContext } from "../../../components/userFeedContext";
import PostListView from "../../../components/postListView";


export default function PostsScreen() {
    const [refreshing, setRefreshing] = useState(false)
    const [posts, setPosts] = useContext(UserFeedContext) as any

    useEffect(() => {
        getUserPosts().then((posts) => {
            let t = [...posts.posts, ...posts.reportposts]

            for(let i=0;i<t.length;i++){
                t[i].commentCount=0;
                t[i].likeCount=0;
                t[i].isOwner = true;
            }

            setPosts(t as any);
            console.log("Posts fetched successfully:", posts);
        }).catch((error) => {
            console.error("Error fetching posts:", error);
            throw error; // Re-throw to handle it in the UI if needed
        })
    },[])

    function handleRefresh(){
        getUserPosts().then((posts)=>{
            let t = [...posts.posts, ...posts.reportposts]

            for(let i=0;i<t.length;i++){
                t[i].likeCount = 0;
                t[i].commentCount=0;
                t[i].isOwner=true;
            }

            setPosts(t as any)
            setRefreshing(false)
            console.log("Refreshed user posts successfully.")
        }).catch((error) =>{
            console.error("Error fetching user posts:",error)
            throw error;
        })
    }

    const renderFooter = () => {
            if(posts.length>10){
                return(
                    <Text style={[styles.body, {fontSize:15}]}>Congrats, you made it to the bottom!</Text>
                )
            }
    }



    return (
        <View style={styles.container}>
            <FlatList
                data={posts}
                //@ts-ignore
                keyExtractor={(item) => item.eid.toString()}
                ListEmptyComponent={                     
                    <Text style={{ textAlign: "center", fontSize: 25 , justifyContent:'center', marginTop:global.height*0.3, color:Colors.dark.redBright}}>
                        You have not made any posts.{"\n\n"}
                        <Text style={{fontSize:20, color:Colors.dark.text}}>Try refreshing or smth</Text>{"\n"}
                    </Text>
                }

                renderItem={(post: ListRenderItemInfo<any>) => {
                    return <PostListView post={post} />
                }}

                ListFooterComponent={renderFooter}
                ListFooterComponentStyle={{marginBottom: 60}}


                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        colors={[Colors.dark.cyan, Colors.dark.redBright]}
                        progressBackgroundColor={Colors.dark.backgroundProfile}
                        onRefresh={() => {
                            handleRefresh();
                        }}
                    />
                }
            >

            </FlatList>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: Colors.dark.tabBg,
    },
    body:{
            fontSize: 20,
            fontWeight: 'bold',
            color: Colors.dark.text,
            textAlign: 'center',
            backgroundColor: Colors.dark.tabBg,
            width:global.width*0.9*0.88,
            alignSelf:'center',
            textAlignVertical:'center',
        },
})