import React, {useState} from "react";
import { Image, StyleSheet, View, Text, TextInput} from "react-native";
import { useTheme } from '@react-navigation/native';
import { Button} from 'native-base';
import Logo from "../../resources/logo.png";
import { auth } from '../../firebase';


function Login({navigation}) {
    const { colors } = useTheme();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    function handleSignUp() {
        navigation.navigate("Name")
    }

    const handleLogin = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then(userCredentials => {
        const user = userCredentials.user;
        console.log('Logged in with:', user.email);
        fetch(localhost+'/userprofile/uid/'+user.uid, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    console.log('good handleLogin');
                    alert("Successfully logged in!")
                    response.json().then(function(data) {
                        navigation.navigate("HomeWithNav", {
                            username: data[0].username
                        });
                    })
                } else {
                    // Examine the text in the response
                    console.log('issue in handleLogin. Status code: '+ response.status);
                    alert("Unsuccessful")
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
      })
      .catch(error => alert(error.message))
	   
  }

  const passwordReset = () => {
    auth
      .sendPasswordResetEmail(email)
      .then(() => {
        console.log('Password reset email sent.');
      })
      .catch(error => alert(error.message))
  }


    function handleForgotPassword() {
        passwordReset()
    }
    return (
        <View>
            <View style={ styles.logoPosition }>
                <Image source = { Logo } style = { styles.logoSize }/>
                <Text style={ [styles.name, {color: colors.text}] }>Boiler LiftUp</Text>
            </View>
            <View style={ styles.content }>
                <Text style={ [styles.title, {color: colors.text}] }>Sign In</Text>
                <Text style={ [styles.subtitle, {color: colors.text}] }>Email:</Text>
                <TextInput placeholder = "pete@purdue.edu" style={ [styles.input, {color: colors.text}] } onChangeText={(email) => setEmail(email)} />
                <Text style={ [styles.subtitle, {color: colors.text}] }>Password: </Text>
                <TextInput secureTextEntry={true} style={ [styles.input, {color: colors.text}] } onChangeText={(password) => setPassword(password)} />
            </View>
            <View style={ styles.buttons }>

                <Button style={ styles.buttonContent } onPress={handleLogin}>

                        <Text style={ styles.buttonText }>Sign In</Text>
                </Button>
                <Button style={ styles.buttonContent } onPress={handleSignUp}>
                        <Text style={ styles.buttonText }>Sign Up</Text>
                </Button>

                <Button style={ styles.buttonContent } onPress={handleForgotPassword}>
                        <Text style={ styles.buttonText }>Forgot Password</Text>
                </Button>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    logoPosition: {
        paddingTop: "12%",
        marginBottom: "5%",
        alignItems: "center"
    },
    logoSize: {
        marginTop: "5%",
        aspectRatio: 1,
        width: 150,
        height: 150,
    },
    content: {
        paddingTop: "5%",
        paddingLeft: "10%",
        paddingRight: "10%",
        paddingBottom: "10%"
    },
    name: {
        fontSize: 35,
        fontWeight: "bold"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginBottom: "10%",
        textAlign: 'center'
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginTop: 10
    },
    input: {
        width: "100%",
        height: 40,
        borderBottomWidth: 1
    },
    buttonContent: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 50
    },
    buttonText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
    buttons: {
        paddingLeft: "10%",
        paddingRight: "10%",
    },
});

export default Login;