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';
import { auth } from '../../firebase';
import {Restart} from 'fiction-expo-restart';

function UserProfile({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 [name, setName] = useState('');
    
    // Get profile picture and user data
    async function getUserData() {
        await fetch(localhost+'/userprofile/user/'+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) {
                // 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);

                    setName(data[0].first_name+" "+data[0].last_name)

                    const privacy_data = data[0].privacy;
                    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.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) {
                    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);
        });
    }

    // Get personal records of user
    async function getPersonalRecords() {
        await fetch(localhost+'/userprofile/pr/'+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) {
                    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.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) {
                    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);
        });
    }

    // Call functions to set state variables accordingly
    useEffect(()=> {
        getUserData();
        getAverageStats();
        getPersonalRecords();
        getCommunities();
    } ,[])

    // Component to get pre-set average stats and other avg stats and populate text fields
    const AverageStats = () => {
        console.log(avgStats)
        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>
        )
    }

    // 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>
        )
    }

    function handleEdit() {
        navigation.navigate("EditProfile", {
            username: route.params.username
        })
    }

    function handleNutrition() {
        navigation.navigate("Nutrition", {
            username: route.params.username
        })
    }
    function handleFriends() {
        navigation.navigate("MyFriends", {
            username: route.params.username
        })
    }
    function changeprivacy() {
        navigation.navigate("UpdatePrivacy", {
            username: route.params.username
        })
    }
    function deleteUser() {
        auth.currentUser.delete().then(() => {
            console.log('Successfully deleted user from Firebase');
            fetch(localhost+'/userprofile/' + route.params.username, {
                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) {
                        response.json().then(function(data) {
                            alert("Profile deleted: You will now be navigated to the Landing Page");
                            setTimeout(function(){
                                Restart();                           
                              }, 5000);
                        })
                    } else {
                        // Examine the text in the response
                        console.log('issue in delUser. Status code: '+ response.status);
                    }
                }
            )
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
          })
          .catch((error) => {
            console.log('Error deleting user:', error);
          });
    }

    return (
        <ScrollView scrollEnabled={true}>
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>{name} </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,
            }}
            />
            <AverageStats />
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
            <PersonalRecords />
            <View
            style={{
                borderBottomColor: '#c4baba',
                borderBottomWidth: 1,
            }}
            />
            <Text style={ [styles.subtitle, {color: colors.text}] }>Privacy: {privacy}</Text>
            <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={changeprivacy} >
                    <Text style={ styles.editText } >Update Privacy</Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={handleEdit} >
                    <Text style={ styles.editText } >Edit Profile</Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.editButton } onPress={deleteUser} >
                    <Text style={ styles.editText } >Delete Profile</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_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: 150,
        height: 150,
    },
    
});

export default UserProfile;