import React, { useEffect, useState } from "react";
import { StyleSheet, SafeAreaView, Text, TextInput, View } from "react-native";
import { Button} from 'native-base';
import { useTheme } from '@react-navigation/native';
import useForceUpdate from 'use-force-update';

function UniqueAverageStats({route, navigation}) {
    const { colors } = useTheme();

    const [name, setName] = useState('');
    const [stat, setStat] = useState('');
    const [another, setAnother] = useState(false);

    const postOthAvgStats=() => {
        if (name != '' && stat != '') {
            fetch(localhost+'/signup/othAvgStat', {
                method: "PUT",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    "username": route.params.username,
                    "exercise": name,
                    "stat": stat
                })
            })
            .then(
                function(response) {
                    if (response.status === 200 || response.status === 201) {
                        // Successful POST
                        console.log('good postOthAvgStats');
                        alert("Successfully added!")
                        if (another == false) {
                            navigation.navigate("UniquePRs", {
                                username: route.params.username
                            });
                        } else {
                            setStat('');
                            setName('');
                            navigation.navigate("UniqueAvgStats", {
                                username: route.params.username,
                            });
                        }
                    } else {
                        // Examine the text in the response
                        console.log('issue in postOthAvgStats. Status code: '+ response.status);
                        alert("Unsuccessful")
                    }
                }
            )
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
        }        
        if (another == false) {
            navigation.navigate("UniquePRs", {
                username: route.params.username,
            });
        }
    }

    return (
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Enter other average stat (lbs)</Text>
            <Text style={ [styles.subtitle, {color: colors.text}] }>Exercise Name:</Text>
            <TextInput placeholder = "Bicep Curl" style={ [styles.input, {color: colors.text}] } value ={name} onChangeText={(name) => setName(name)} />
            <Text style={ [styles.subtitle, {color: colors.text}] }>Stat:</Text>
            <TextInput placeholder = "50" style={ [styles.input, {color: colors.text}] } value={stat} onChangeText={(stat) => setStat(stat)}/>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={postOthAvgStats} onPressIn={() => setAnother(true)}>
                        <Text style={ styles.nextText } > Add Another </Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={postOthAvgStats} onPressIn={() => setAnother(false)}>
                    <Text style={ styles.nextText } >Next</Text>
                </Button>
            </View>
        </SafeAreaView>
    );
}

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:"left"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55'
    },
    input: {
        width: "100%",
        height: 40,
        borderBottomWidth: 1
    },
    nextButton: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 50
    },
    nextText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
});

export default UniqueAverageStats;