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 MyFriends({navigation, route}) {
    const { colors } = useTheme();
    const [friends, setFriends] = useState([]);

    async function getFriends() {
        await fetch(localhost+'/social/friend/'+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) {
                    setFriends(data.friends_list);
                })
                console.log("My Friends: Successfully retrived friends.");
            } else {
                console.log('issue getFriends. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

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

    const FriendsList = () => {
        return (
            <View>
                {
                    friends.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>
                                {/* TODO - Fix position of picture and aesthetic fixes needed */}

                            </TouchableOpacity>
                            <View
                                style={{
                                    borderBottomColor: '#c4baba',
                                    borderBottomWidth: 1,
                                }}
                            />
                    </View>
                    })  
                }
                
            </View>
        )
    }

    function handleFriendRequests() {
        navigation.navigate("FriendRequests", {
            username: route.params.username
        });
    }

    useEffect(()=> {
        getFriends();
    } ,[])

    return (
        <ScrollView>
            <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
                {route.params.friend? <Text style={ [styles.title, {color: colors.text}] }>{route.params.friend} Friends</Text>:
                <Text style={ [styles.title, {color: colors.text}] }>My Friends</Text>}
                <View
                    style={{
                        borderBottomColor: '#c4baba',
                        borderBottomWidth: 1,
                    }}
                />
                <FriendsList />
                <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={handleFriendRequests} >
                    <Text style={ styles.editText } >View Friend Requests</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: "2%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginBottom: "2%",
        marginTop: "4%",

    },
    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 MyFriends;