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";


function HomePage({navigation, route}) {
    const { colors } = useTheme();
    const [publicRecords, setPublicRecords] = useState([]);
    const [nutrition, setNutrition] = useState([])

    async function getPublicRecords() {
        await fetch(localhost+'/workout/publicRecords', {
          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) {
                    const temp = data.public
                    const actual = [Math.max(...temp[0]), Math.max(...temp[1]), Math.max(...temp[2])]
                    console.log(actual)
                    setPublicRecords(actual);
                })
                console.log("Public records: Successfully retrived public records.");
            } else {
                console.log('issue getPublicRecords. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    async function getNutrition() {
        await fetch(localhost+'/nutritionDB/'+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) {
                    const temp = data[0]
                    // const actual = [Math.max(...temp[0]), Math.max(...temp[1]), Math.max(...temp[2])]
                    console.log("====== NUTRITION ======")
                    console.log(temp)
                    const actual = [temp.protein, temp.fats, temp.carbohydrates, temp.calories]
                    setNutrition(actual);
                })
                // console.log("Public records: Successfully retrived public records.");
            } else {
                // console.log('issue getPublicRecords. Status Code: ' + response.status);
            }
        })
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    useEffect(()=> {
      getPublicRecords();
      getNutrition();
  } ,[])

    const recordsData = {
        labels: ["Bench Press", "Squats", "Deadlift"],
        datasets: [
        {
            data: publicRecords,
        },
        ],
    };
      const macrodata = {
        labels: ["Protein", "Fat", "Carbohydrates", "Calories"],
        // data: [0.75, 0.5, 0.63, 0.80]
        data: nutrition
      };
    return (
        <ScrollView>
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Home Page Here</Text>
            <Text style={ [styles.subtitle, {color: colors.text}] }>Purdue Records: </Text>
            <BarChart
                style={{
                    marginVertical: 8,
                    borderRadius: 16
                }}
                data={recordsData}
                width={310}
                height={220}
                yAxisSuffix={" lbs"}
                chartConfig={{
                    backgroundColor: "#e3af4d",
                    backgroundGradientFrom: "#e3af4d",
                    backgroundGradientTo: "#e3af4d",
                    decimalPlaces: 0, // optional, defaults to 2dp
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    fillShadowGradient: "#FFFFFF",
                    fillShadowGradientOpacity: 5,
                    style: {
                      borderRadius: 16
                    },
                    propsForDots: {
                      r: "6",
                      strokeWidth: "2",
                      stroke: "#ffa726"
                    }
                }}
                fromZero={true}
                />
            <Text style={ [styles.subtitle, {color: colors.text}] }>Nutritional Information: </Text>
            <ProgressChart
                data={macrodata}
                width={310}
                height={220}
                strokeWidth={12}
                radius={34}
                chartConfig={{
                    backgroundColor: "#e3af4d",
                    backgroundGradientFrom: "#e3af4d",
                    backgroundGradientTo: "#e3af4d",
                    decimalPlaces: 2,
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    style: {
                    borderRadius: 16
                    },
                    propsForDots: {
                    r: "6",
                    strokeWidth: "2",
                    stroke: "#ffa726"
                    }
                }}
                hideLegend={false}
            />
        </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: "5%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 20,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginTop: 20
    },
    
});

export default HomePage;