import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Text,
    ActivityIndicator,
    Button
} from 'react-native';
import firebase from 'firebase'

class EmailPasswordLogin extends Component {

    state = {
        email: "",
        password: "",
        account: {
            email: ""
        },
        isloading: true
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            this.setState({ isloading: false })
            if (user && user.email) {
                this.setState({ account: { email: user.email } })
            } else {
                this.setState({ account: {} })
            }
        })
    }

    login() {
        const { email, password } = this.state;
        firebase.auth().signInWithEmailAndPassword(email, password)
            .catch(err => {
                alert(`Error: ${err.message}`)
            })
    }

    logout() {
        firebase.auth().signOut()
            .catch(err => {
                alert(`Error: ${err.message}`)
            });
    }

    render() {
        if (this.state.isloading) {
            return this.renderLoading();
        }
        if (this.state.account.email) {
            return this.renderLoggedIn();
        }
        return this.renderLogin();
    }

    renderLoading = () => (
        <View style={styles.container}>
            <ActivityIndicator size="large" />
        </View>
    );

    renderLoggedIn = () => (
        <View style={styles.container}>
            <Text style={styles.title}>Logged In</Text>
            <Text style={styles.email} >{this.state.account.email}</Text>
            <Button onPress={() => this.logout()} title="Log Out!" />
        </View>
    );

    renderLogin = () => (
        <View style={styles.container}>
            <Text style={styles.title}>Login</Text>
            <TextInput style={styles.input} value={this.state.email} onChangeText={email => this.setState({ email })} placeholder="Email" spellCheck={false} autoCapitalize="none" autoCorrect={true} />
            <TextInput style={styles.input} secureTextEntry={true} value={this.state.password} onChangeText={password => this.setState({ password })} placeholder="Password" />
            <Button onPress={() => this.login()} title="Login" />
        </View>
    );
}

const styles = StyleSheet.create({
    email: {
        alignSelf: "center"
    },
    title: {
        alignSelf: "center",
        fontSize: 30,
        marginBottom: 20,
        fontWeight: "bold"
    },
    container: {
        flex: 1,
        padding: 20,
        justifyContent: 'center',
    },
    input: {
        height: 40,
        borderWidth: 1,
        marginBottom: 10,
        padding: 5,
        borderColor: "#dedede"
    }
});

export default EmailPasswordLogin;