import React, { useState, useEffect } from "react";
import { StyleSheet, SafeAreaView, Text, ScrollView, View, Image} from "react-native";
import { useTheme } from '@react-navigation/native';
import { TouchableOpacity } from "react-native-gesture-handler";
import { Button} from 'native-base';
import Logo from '../../resources/logo.png';


function FriendRequests({navigation, route}) {
    const { colors } = useTheme();
    const [friendReq, setFriendReq] = useState([])

    async function getFriendRequests() {
        await fetch(localhost+'/social/friendReq/'+route.params.username, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
                'Pragma': 'no-cache',
                'Expires': 0
            }
        })
        .then(function(response) {
            if (response.status === 200 || response.status === 201) {
                response.json().then(function(data) {
                    console.log(data);
                    setFriendReq(data.requests);
                })
                console.log("My Friends Requests: Successfully retrived friend requests.");
            } else {
                console.log('issue getFriendRequests. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    const RequestList = () => {
        return (
            <View>
                {
                    friendReq.map(function(friend) {
                        return <View>
                            <TouchableOpacity onPress={()=> handleNavToFriend(friend.username)}>
                                <View style={{flexDirection: "row"}}>
                                    <View>
                                    <Text style={ [styles.subtitle, {color: colors.text}] }>{friend.first_name} {friend.last_name}</Text>
                                    <Text style={ [styles.subtitle, {color: colors.text}] }>@{friend.username}</Text>
                                    </View>
                                    {friend.profile_picture? <Image style={ styles.profileSize } defaultSource={Logo} source={{uri: friend.profile_picture}}/>: null}
                                </View>
                            </TouchableOpacity>
                            <View> 
                                <Button style={ styles.editButton } onPress={()=> acceptRequest(friend.username)}>
                                    <Text style={ styles.editText } >Accept</Text>
                                </Button>
                                <Button style={ styles.editButton } onPress={()=> rejectRequest(friend.username)}>
                                    <Text style={ styles.editText } >Reject</Text>
                                </Button>
                            </View>
                            <View
                                style={{
                                    borderBottomColor: '#c4baba',
                                    borderBottomWidth: 1,
                                }}
                            />
                    </View>
                    })  
                }
                
            </View>
        )
    }

    function handleCompleteRequests() {
        navigation.navigate("MyFriends", {
            username: route.params.username
        });
    }

    function handleNavToFriend(friend_username) {
        navigation.navigate("FriendProfile", {
            friend: friend_username,
            username: route.params.username
        })
    }

    function acceptRequest(friend) {
        fetch(localhost+'/social/accFriendReq', {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "username": route.params.username,
                "friend": friend
            })
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    console.log('good accFriendRequest');
                    alert("Successfully sent!")
                } else {
                    // Examine the text in the response
                    console.log('issue in acceptRequest. Status code: '+ response.status);
                    alert("Unsuccessful")
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function rejectRequest(friend) {
        fetch(localhost+'/social/rejFriendReq', {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "username": route.params.username,
                "friend": friend
            })
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    console.log('good rejFriendRequest');
                    alert("Successfully sent!")
                } else {
                    // Examine the text in the response
                    console.log('issue in rejectRequest. Status code: '+ response.status);
                    alert("Unsuccessful")
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }
    useEffect(()=> {
        getFriendRequests();
    } ,[])

    return (
        <ScrollView>
            <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
                <Text style={ [styles.title, {color: colors.text}] }>Friend Requests</Text>
                <View
                    style={{
                        borderBottomColor: '#c4baba',
                        borderBottomWidth: 1,
                    }}
                />
                <RequestList />
                <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={handleCompleteRequests} >
                    <Text style={ styles.editText } >Done</Text>
                </Button>
            </View>
            </SafeAreaView>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "20%",
        paddingLeft: "5%",
        paddingRight: "5%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "20%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginBottom: "2%"
    },
    editButton: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 20
    },
    editText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
    profilePosition: {
        paddingTop: "12%",
        marginBottom: "5%",
        marginLeft: "10%",
        alignItems: "center"
    },
    profileSize: {
        marginTop: "2%",
        marginBottom: "2%",
        aspectRatio: 1,
        marginLeft: "10%",
        width: 50,
        height: 50,
    },
    
});

export default FriendRequests;