/*
Autor: Amin Fas
Datum: 08.02.2019
Beschreibung: DnF-Splashscreen
*/
import React from 'react'
import { View, TextInput, StyleSheet, TouchableOpacity, Text, Image } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import { Input , Button, ThemeProvider } from 'react-native-elements';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { updateEmail, updatePassword, login, getUser } from '../actions/user'
import Firebase from '../config/Firebase'
import * as Font from 'expo-font';


class Splashscreen extends React.Component {
    componentDidMount = () => {
        Firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.props.getUser(user.uid)
                if (this.props.user != null) {
                    this.props.navigation.navigate('Profile')
                }
            }
        })
        Font.loadAsync({
            'Caveat-Regular' : require('../assets/fonts/Caveat-Regular.ttf'),
            'Catamaran-Regular': require('../assets/fonts/Catamaran-Regular.ttf'),
            'Catamaran-Bold': require('../assets/fonts/Catamaran-Bold.ttf'),
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.logo} source={require('../assets/logo.png')}/>

                <Image style={styles.img} source={require('../assets/Smile-Dog.png')}/>

                <Text style={styles.title}>
                    Hey du!
                </Text>
                <Text style={styles.loginText}>
                Endlich hast du Zeit für mich.{"\n"}
                </Text>


                <TouchableOpacity style={styles.btnlogin} onPress={() => this.props.navigation.navigate('Login')}>
                    <Text style={styles.buttonText}>Login</Text>
                    <Image style={styles.pawLogin} source={require('../assets/paw-login.png')}/>
                </TouchableOpacity>

                <TouchableOpacity style={styles.btnregister} onPress={() => this.props.navigation.navigate('Signup')}>
                    <Text style={styles.buttonText}>Registrieren</Text>
                    <Image style={styles.pawRegister} source={require('../assets/paw-register.png')}/>
                </TouchableOpacity>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF5BF',
        alignItems: 'center',
        justifyContent: 'center',
    },
    logo:{
        top: -150,
    },
    img:{
        top: -150,
    },
    title:{
        top: -140,
        fontSize: 30,
        fontFamily: 'Catamaran-Bold',
        color: '#646464',
    },
    loginText:{
        marginTop: -145,
        fontSize: 20,
        fontFamily:'Catamaran-Regular',
        color: '#646464'
    },
    btnlogin: {
        position:'absolute',
        height: 150,
        bottom: 50,
        left: 20,
        alignItems: 'center',
        justifyContent: 'center',
        width: 150
    },
    btnregister:{
        position: 'absolute',
        height: 150,
        bottom: 50,
        right: 20,
        alignItems: 'center',
        justifyContent: 'center',
        width: 150,
    },
    buttonText: {
        zIndex: 10,
        fontSize: 30,
        fontFamily: 'Caveat-Regular',
        color: '#fff',
        top: 15,
        bottom: 0,
        left: 10,
        color: '#646464'
    },
    buttonSignup: {
        fontSize: 12
    },
    pawLogin:{
        position: 'absolute',
        bottom: 0,
        left: 0
    },
    pawRegister:{
        position: 'absolute',
        bottom: 0,
        right: 0,
    },
})


const mapDispatchToProps = dispatch => {
    return bindActionCreators({ updateEmail, updatePassword, login, getUser }, dispatch)
}

const mapStateToProps = state => {
    return {
        user: state.user
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Splashscreen)