import React, { useState, useEffect } from "react";
import { StyleSheet, SafeAreaView, Text, ScrollView} from "react-native";
import { useTheme } from '@react-navigation/native';
import {StackedBarChart, ProgressChart, BarChart} from "react-native-chart-kit";

// TODO - Page to be redirected to upon clicking a button in My Friend Page to compare workout stats
// This page should give them an option to compare average stats or personal records
// Based on that, the variable is selected to load into the graph
// There can be a default set if thats easier

function WorkoutComp({navigation, route}) {

    // Average and personal record values for user in the form of an array of jsons with each json 
    // in the form {ex_name: "", stat: ""}
    const [avgCompUser, setAvgCompUser] = useState([]);
    const [prCompUser, setPrCompUser] = useState([]);

    // same as above for friend
    const [avgCompFriend, setAvgCompFriend] = useState([]);
    const [prCompFriend, setPrCompFriend] = useState([]);

    async function getAvgComp() {
        await fetch(localhost+'/friend/avg/'+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) {
                    setAvgCompUser(data.user_avg)
                    setAvgCompFriend(data.friend_avg)
                })
                console.log("Friend Profile: Successfully retrived average comparison.");
            } else {
                console.log('issue getAvgComp. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    async function getPrComp() {
        await fetch(localhost+'/friend/pr/'+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) {
                    setPrCompUser(data.user_pr)
                    setPrCompFriend(data.friend_pr)
                })
                console.log("Friend Profile: Successfully retrived average comparison.");
            } else {
                console.log('issue getAvgComp. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    useEffect(()=> {
       getAvgComp();
       getPrComp();
    } ,[])
    return (<View></View>);
}


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: "5%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 20,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginTop: 20
    },
    
});

export default WorkoutComp;