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

import firebase from "../config/firebase.js";

var t = require('tcomb-form-native');

var Form = t.form.Form;

var Login = t.struct({
  email: t.String,
  password: t.String,
});

var options = {
  fields: {
    email: {
      error: 'Insert a valid email'
    }
  }
};

export default class withFirebase extends Component {

  constructor(props) {
    super(props);

    this.state = {
      logged: false,
    }

  }

  onPress() {
    // call getValue() to get the values of the form
    var value = this.refs.form.getValue();

    if (value) { // if validation fails, value will be null

      firebase.auth()
        .signInWithEmailAndPassword(value.email, value.password)
        .then(function() {

          var user = firebase.auth().currentUser;
          alert(user.email);
          this.setState({
              loggedIn: true,
          });
          AsyncStorage.setItem('user_data', JSON.stringify(user));
        }.bind(this),

        function(error) {
            var errorCode = error.code;
            var errorMessage = error.message;
            alert(errorMessage);
        });

    }
  }


  render() {
    return (
      <View style={styles.container}>
        <Form
          ref="form"
          type={Login}
          options={options}
        />
        <Text>{this.state.logged}</Text>
        <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Save</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});

AppRegistry.registerComponent('withFirebase', () => withFirebase);