import React, { useState, useEffect } from "react";
import { StyleSheet, SafeAreaView, Text, View, Image, ScrollView} from "react-native";
import { useTheme } from '@react-navigation/native';
import { Button} from 'native-base';
import Logo from '../../resources/logo.png';
function FriendProfile({navigation, route}) {
    const { colors } = useTheme();
    // base 64 to be used to display image
    const [picUri, setPicUri] = useState('');
    // const [picture, setPicture] = useState('');
    const [username, setUsername] = useState('');
    const [interests, setInterests] = useState('');
    const [communities, setCommunities] = useState([]);
    const [avgStats, setAvgStats] = useState([]);
    const [prStats, setPrStats] = useState([]);
    const [privacy, setPrivacy] = useState('');
    const [privacyNumber, setPrivacyNumber] = useState('');
    const [posts, setPosts] = useState('');
    const [postTitles, setPostTitles] = useState('');
    const [isFriend, setIsFriend] = useState(false);
    // Get profile picture and user data
    async function getUserData() {
        await fetch(localhost+'/userprofile/user/'+route.params.friend, {
            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) {
                // Successful GET
                // Set Fields to correct values
                response.json().then(function(data) {
                    const imgUrl = data[0].profile_picture;
                    setPicUri(imgUrl);

                    const username_data = data[0].username;
                    setUsername(username_data);

                    const privacy_data = data[0].privacy;
                    setPrivacyNumber(privacy_data);

                    let privacy_string = "";
                    switch(privacy_data) {
                        case 0:
                            privacy_string = "Stats are private.";
                            break;
                        case 1:
                            privacy_string = "Friends can see your stats.";
                            break;
                        case 2:
                            privacy_string = "Stats used in public records.";
                            break;
                        case 3:
                            privacy_string = "Friends and Public can see your stats.";
                            break;
                    }
                    setPrivacy(privacy_string);

                    const interests_data = data[0].interests;
                    let interests_string = ""
                    for (var i = 0; i < interests_data.length; i++) {
                        if (i != 0) {
                            interests_string += ", "
                        }
                        interests_string += interests_data[i]
                    }
                    setInterests(interests_string);
                })
                console.log("User Profile: Successfully retrived profile picture.");
            } else {
                console.log('issue getProfilePicture. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }
    
    // Get average stats of user
    async function getAverageStats() {
        await fetch(localhost+'/userprofile/avg/'+route.params.friend, {
            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) {
                    setAvgStats(data.avgStats);
                })
                console.log("User Profile: Successfully retrived average statistics.");
            } else {
                console.log('issue getAverageStats. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    // Check if passed in friend is a friend of current user
    async function getIsFriend() {
        await fetch(localhost+'/social/isFriend/'+route.params.username+'/'+route.params.friend, {
            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("inside function "+data.isFriend)
                    setIsFriend(data.isFriend);
                })
                console.log("User Profile: Successfully retrived friend status.");
            } else {
                console.log('issue getIsFriend. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    // Get personal records of user
    async function getPersonalRecords() {
        await fetch(localhost+'/userprofile/pr/'+route.params.friend, {
            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) {
                    setPrStats(data.prStats)
                })
                console.log("User Profile: Successfully retrived personal records.");
            } else {
                console.log('issue getPersonalRecords. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    // Get communties owned by user
    async function getCommunities() {
        await fetch(localhost+'/userprofile/comm_owned/'+route.params.friend, {
            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) {
                    setCommunities(data.communities);
                })
                console.log("User Profile: Successfully retrived owned communties.");
            } else {
                console.log('issue getCommunities. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    // Get posts made by friend user
    async function getPosts() {
        await fetch(localhost+'/friend/posts/'+route.params.friend, {
            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) {
                    setPosts(data.posts);
                    console.log("all posts")
                    console.log(data.posts.length)
                    var result = ''
                    for (var i = 0; i < data.posts.length; i++) {
                        console.log("hello")
                        if (i != 0) {
                            result += ", "
                        }
                        result += data.posts[i].title
                        
                    }
                    console.log(result)
                    setPostTitles(result)
                })
                console.log("User Profile: Successfully retrived average statistics.");
            } else {
                console.log('issue getAverageStats. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    // Call functions to set state variables accordingly
    useEffect(()=> {
        getUserData();
        getAverageStats();
        getPersonalRecords();
        getCommunities();
        if (route.params.friend != undefined) {
            getIsFriend();
        }
        getPosts();
    } ,[])

    // Component to get pre-set average stats and other avg stats and populate text fields
    const AverageStats = () => {
        return (
            <View>
                <Text style={ [styles.subtitle_head, {color: colors.text}] }>Workout Stats: Average Statistics</Text>
                {
                    avgStats.map(function(stat) {
                        return <Text style={ [styles.subtitle, {color: colors.text}] }>{stat.ex_name}: {stat.stat} </Text>
                    })
                }
                <View
                    style={{
                        borderBottomColor: '#c4baba',
                        borderBottomWidth: 1,
                    }}/>
            </View>
        )
    }

    // Component to get pre-set personal records and other personal records and populate text fields
    const PersonalRecords = () => {        
        return (
            <View>
                <Text style={ [styles.subtitle_head, {color: colors.text}] }>Workout Stats: Personal Records</Text>
                {
                    prStats.map(function(stat) {
                        return <Text style={ [styles.subtitle, {color: colors.text}] }>{stat.ex_name}: {stat.stat} </Text>
                    })
                }
                <View
                    style={{
                        borderBottomColor: '#c4baba',
                        borderBottomWidth: 1,
                    }}/>
            </View>
        )
    }

    function handleNutrition() {
        navigation.navigate("Nutrition", {
            username: route.params.friend
        })
    }
    function handleFriends() {
        if (route.params.friend != undefined) {
            navigation.navigate("MyFriends", {
                username: route.params.friend,
                friend: route.params.friend
            })
        } else {
            navigation.navigate("MyFriends", {
                username: route.params.friend
            })
        }
    }
    var statShow = false;
    if (privacyNumber == 1 && isFriend == true) {
        statShow = true;
    }
    if (privacyNumber == 3) {
        statShow = true;
    }

    function handleAddFriend() {
        fetch(localhost+'/social/addFriendReq', {
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "username": route.params.username,
                "friend": route.params.friend
            })
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    console.log('good postFriendRequest');
                    alert("Successfully sent!")
                } else {
                    // Examine the text in the response
                    console.log('issue in postFriendRequest. Status code: '+ response.status);
                    alert("Unsuccessful")
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }
    return (
        <ScrollView scrollEnabled={true}>
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>User Profile Page Here</Text>
            <View style={ styles.profilePosition }>
                <Image style={ styles.profileSize } defaultSource={Logo} source={{uri: picUri}}
                />
            </View>
            <Text style={ [styles.subtitle, {color: colors.text}] }>Username: {username}</Text>
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
             <Text style={ [styles.subtitle, {color: colors.text}] }>Interests: {interests}</Text>
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
             <Text style={ [styles.subtitle, {color: colors.text}] }>Communities: {communities}</Text>
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
            <Text style={ [styles.subtitle, {color: colors.text}] }>Posts made: {postTitles}</Text>
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
            {statShow? <AverageStats />: null}
            {statShow? <PersonalRecords />: null}
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={handleNutrition}>
                    <Text style={ styles.editText } >Nutrition</Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={handleFriends} >
                    <Text style={ styles.editText } >View Friends</Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={() => handleAddFriend(route.params.friend_username)} >
                    <Text style={ styles.editText } >Send Friend Request</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_head: {
        fontSize: 16,
        textAlign:"center",
        fontWeight: "bold",
        color: '#5c5a55',
        marginBottom: "2%",
        textDecorationLine: "underline"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"center",
        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%",
        alignItems: "center"
    },
    profileSize: {
        marginTop: "2%",
        aspectRatio: 1,
        width: 100,
        height: 100,
    },
    
});

export default FriendProfile;