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

function Password({route, navigation}) {
    const { colors } = useTheme();
    const [password, setPassword] = useState('');
    const handleSignUp = () => {
        auth.createUserWithEmailAndPassword(route.params.email, password)
        .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;

        if (errorCode == 'auth/email-already-in-use')
        {
                alert('email-already-in-use.');
            }
            else
            {
                alert(errorMessage);
            }
        });
        auth.onAuthStateChanged(function(user) {
        if (user) {
                console.log("User is signed in.");
        } else 
        {
            console.log("No user is signed in.");
        }
        navigation.navigate("PersonalInfo", {
            firstName: route.params.firstName,
            lastName: route.params.lastName,
            username: route.params.username,
            uid: user.uid
        })	
    });
} 

    return (
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Enter your password:</Text>
            <Text style={ [styles.subtitle, {color: colors.text}] }>Please make your password complex.</Text>
            <TextInput secureTextEntry={true} style={ [styles.input, {color: colors.text}] } onChangeText={(password) => setPassword(password)} />
            
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={handleSignUp}>

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