import React, { Component } from 'react';
import { Text, Image, StyleSheet, View, TextInput, TouchableHighlight } from 'react-native';

import TextField from 'react-native-md-textinput';

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flex: 1,
        resizeMode: 'cover',
        width: null,
        height: null,
    },
    logo: {
        marginTop: 70,
        width: 150,
        height: 150,
        resizeMode: 'contain'
    },
    label: {
        marginBottom: -10,
        alignItems: 'flex-start',
        fontSize: 20,
        fontWeight: '300',
        color: 'rgb(94, 109, 155)'
    },
    inputWrap: {
        position: 'absolute',
        marginTop: 240
    },
    input: {
        borderBottomColor: '#305596',
        borderBottomWidth: 1,
        width: 320,
        fontSize: 20,
        fontWeight: '500',
        color: 'grey',
    },
    btn: {
        marginTop: 25,
        backgroundColor: '#FFF',
        borderRadius: 50,
        borderWidth: 2,
        width: 320,
        borderColor: '#FFF'
    },
    txt: {
        fontSize: 20,
        fontWeight: '500',
        textAlign: 'center',
        flexDirection: 'column',
        padding: 10,
        color: 'rgb(94, 109, 155)'
    },
})

class Register extends Component {

    constructor(props) {
        super(props);

        this.state = {
            username: "",
            email: "",
            password: "",
            confirm: ""
        }
    }

    static navigationOptions = {
        title: 'Register',
        header: null,
        tabBarVisible: false
    }

    render() {
        return <Image source={require('../images/bg-crem.jpg')} style={styles.container}>
            <Image source={require('../images/logo-crem.png')} style={styles.logo}></Image>
            <View style={styles.inputWrap}>
                <Text style={styles.label} >Username</Text>
                <TextInput
                    style={styles.input}
                    underlineColorAndroid={'transparent'}
                    keyboardType={'default'}
                    onChangeText={username => this.setState(() => ({ username }))}
                    value={this.state.username}
                />
                <Text style={styles.label} >Email</Text>
                <TextInput
                    style={styles.input}
                    underlineColorAndroid={'transparent'}
                    keyboardType={'email-address'}
                    onChangeText={email => this.setState(() => ({ email }))}
                    value={this.state.email}
                />
                <Text style={[styles.label, { marginTop: 15 }]} >Password</Text>
                <TextInput
                    style={styles.input}
                    underlineColorAndroid={'transparent'}
                    onChangeText={password => this.setState(() => ({ password }))}
                    secureTextEntry={true}
                    value={this.state.password}
                />
                <Text style={[styles.label, { marginTop: 15 }]} >Password</Text>
                <TextInput
                    style={styles.input}
                    underlineColorAndroid={'transparent'}
                    onChangeText={confirm => this.setState(() => ({ confirm }))}
                    secureTextEntry={true}
                    value={this.state.confirm}
                />
                <TouchableHighlight onPress={() => this.props.navigation.navigate('Dashboard')} style={styles.btn} underlayColor={'rgba(244, 236, 233, 0.8)'} >
                    <Text style={styles.txt} >SIGN UP</Text>
                </TouchableHighlight>
            </View>
        </Image>
    }
}

export default Register;