//Modules
import React from 'react';
import {View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';


//Components
import {Header} from '../index';

const Login = ({ navigation }) => {
        const [UserName, onChangeUserName] = React.useState('');
        const [PassWord, onChangePassWord] = React.useState('');

        return ( 
            <View>
                <Header/>
                <View style={Styles.Container}>
                    <TextInput 
                    style={Styles.Input} 
                    onChangeText={text => onChangeUserName(text)}
                    placeholder="Gebruikersnaam"
                    value={UserName}
                    />
                    <TextInput 
                    style={Styles.Input} 
                    onChangeText={text => onChangePassWord(text)}
                    placeholder="Wachtwoord"
                    value={PassWord}
                    secureTextEntry={true}
                    />
                    <View style={Styles.BtnWrapper}>
                        <TouchableOpacity style={Styles.BtnOutline}>
                            <Text>Annuleren</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={Styles.Btn}>
                            <Text style={Styles.white} onPress={() =>
                                navigation.navigate('Home')
                            }>Login</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    
}

const Styles = StyleSheet.create ({
    Container: {
        marginTop: '50%',
        display: 'flex',
        alignItems: 'center',
        
    },
    Input: {
        height: 40, 
        borderColor: '#DE0000', 
        borderRadius: 5,
        borderWidth: 1,
        width: '60%',
        marginTop: 30,
        padding: 10.
    },
    Btn: {
        backgroundColor: '#DE0000',
        paddingVertical: 10,
        paddingHorizontal: 15,
        borderRadius: 5,
        marginLeft: 50,
    },
    BtnOutline: {
        borderColor: '#DE0000',
        borderRadius: 5,
        borderWidth: 1,
        paddingVertical: 10,
        paddingHorizontal: 15,
        borderRadius: 5,
    },
    white: {
        color: '#ffffff',
    },
    BtnWrapper: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: 30,
    },
})

export default Login;