import React, { useEffect, useState } from "react";
import { StyleSheet, SafeAreaView, Text, TextInput, View, ScrollView, Flatlist } from "react-native";
import { Button} from 'native-base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useFocusEffect } from '@react-navigation/native';
import { useTheme } from '@react-navigation/native';



function CommunityContent({navigation, route}) {
    const { colors } = useTheme();
    const { user, comName } = route.params;
    const [posts, setPosts] = useState([])

    useFocusEffect(
        React.useCallback(() => {
            const unsubscribe = getCommPosts(comName);
            return () => unsubscribe;
        }, [])
    );
        
    function handleMakePost(){
        navigation.navigate("MakePost", {
            user: user,
            comName: comName,
        });
        console.log(comName)
    }

    function canDelete(name,id) {
        if (name == user) {
            return <Icon name='delete' color="#5c5a55" size={20} onPress={()=>delPost(id)}/>
        }
    }

    function likeButton(name, id, likers) {
        if (likers.includes(name)) {
            return <Icon name='minus' color="#5c5a55" size={20} onPress={()=>unlikePost(id, name)}/>
        } else {
            return <Icon name='plus' color="#5c5a55" size={20} onPress={()=>likePost(id, name)}/>
        }
    }

    function unlikePost(id, name){
        fetch(localhost+'/post/pulllike/' + id + "/" + name, {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in leaveComm. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function likePost(id,name){
        fetch(localhost+'/post/pushlike/' + id + "/" + name, {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in joinComm. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    async function getCommPosts(comname){
        await fetch(localhost+'/post/'+comname, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(function(response) {
            if (response.status === 200 || response.status === 201) {
                // Successful GET
                // Set Fields to correct values
                response.json().then(function(data) {
                    setPosts(data.map(item => ({
                            _id: item._id,
                            title: item.title,
                            content: item.content,
                            username: item.username,
                            likes: item.likes,
                            like_users: item.like_users
                        }))
                    )
                });
                console.log(posts)
            } else {
                console.log('issue getCommPosts. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function delPost(id){
        fetch(localhost+'/post/' + id, {
            method: "DELETE",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate'
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    response.json().then(function(data) {
                        console.log(data);
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in delPost. Status code: '+ response.status);
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    return (
        <ScrollView>
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={[styles.title, { color: colors.text }]}>{comName}</Text>
            <View>
                {posts.map(key => {
                    return <>
                        <View style={{ flexDirection: "row" }}>
                            <Text style={[styles.comName, { color: colors.text }]}>{key.title}</Text>
                            <Text style={[styles.authorName, { color: colors.text }]}>{key.username}</Text>
                            <View style={{ position: 'absolute', right: 20, bottom: 30 }}>
                                {canDelete(key.username, key._id)}
                            </View>
                            <View style={{ position: 'absolute', right: 20, bottom: 5 }}>
                                {likeButton(key.username, key._id, key.like_users)}
                            </View>
                        </View>
                        <Text style={[styles.postContent, { color: colors.text }]}>{key.content}</Text>
                        <Text style={[styles.postContent, { color: colors.text }]}>votes: {key.likes}</Text>
                        <View
                            style={{
                                borderBottomColor: '#c4baba',
                                borderBottomWidth: 1,
                            }}
                        />
                    </>
                })}
            </View>
                <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={()=>handleMakePost()}>
                    <Text style={ styles.nextText } >Make Post</Text>
                </Button>
            </View>
            {/* </View> */}
        </SafeAreaView>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "10%",
        paddingLeft: "2%",
        paddingRight: "2%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "5%",
        textAlign:"center"
    },
    comName: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginTop: '10%',
        marginBottom: '1%'
    },
    authorName: {
        fontSize: 14,
        textAlign:"right",
        color: '#878686',
        marginTop: '10%',
        marginBottom: '1%',
        paddingLeft: '50%'
    },
    postContent: {
        fontSize: 14,
        textAlign:"left",
        color: '#5c5a55',
        marginTop: '2%',
        marginBottom: '3%'
    },
    nextButton: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 50
    },
    nextText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
});

export default CommunityContent;