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

import Button from '../common/button';

var Parse = require('parse/react-native');
var ParseReact = require('parse-react/react-native');

export default class Signin extends Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      errorMessage: ''
    };
    this.showLoginError = this.showLoginError.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Sign In</Text>

        <Text style={styles.label}>Username:</Text>
        <TextInput
          autoCapitalize={'none'}
          style={styles.input}
          value={this.state.username}
          onChangeText={(text) => this.setState({username: text})}
        />

        <Text style={styles.label}>Password:</Text>
        <TextInput
          secureTextEntry={true}
          style={styles.input}
          value={this.state.password}
          onChangeText={ (text) => this.setState({password: text}) }
        />

        <Text style={styles.label}>{this.state.errorMessage}</Text>
        <Button text={'Sign In'} onPress={ () => this.onPress() }  />
      </View>
    );
  }

  showLoginError(user, error) {
    this.setState({errorMessage: error.message});
  }
  onPress() {
    console.log(this);
    Parse.User.logIn(this.state.username, this.state.password, {
      success: function(user) {
        console.log(user);
      },
      error: this.showLoginError
    });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    padding: 4,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    width: 200,
    alignSelf: 'center'
  },
  label: {
    fontSize: 18
  }
});