import React, { Component } from "react";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image } from "react-native";
import firebase from "firebase";

import { styles } from "../config/styles";
import CustomButton from "../components/CustomButton";


export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };
        this.onLogin = this.onLogin.bind(this)
    };

    onLogin() {
        const { email, password } = this.state;
        firebase.auth().signInWithEmailAndPassword(email, password).then((result) => {console.log(result)}).catch((error) => {console.log(error)})
    }

    render() {
        
        return (
            <TouchableWithoutFeedback style={styles.stdcontainer} onPress={Keyboard.dismiss} accessible={false}>
                <ImageBackground style={styles.stdcontainer} source={require('../assets/yellow-white.jpg')}>
                    <Image style={styles.logo} resizeMode="contain" source={require("../assets/open-hand.png")}/>
                    <TextInput style={styles.regtxtfield} placeholder="Email" onChangeText={(email) => this.setState({ email })}/>
                    <TextInput style={styles.regtxtfield} placeholder="Password" onChangeText={(password) => this.setState({ password })} secureTextEntry={ true }/>
                    <CustomButton marginTop={70} title="Login" onPress={() => this.onLogin()}/>
                    <CustomButton marginTop={25} title="Register" onPress={() => this.props.navigation.navigate('Register')}/>
                </ImageBackground>
            </TouchableWithoutFeedback>
        );
    }
}