import React, { Component, PropTypes } from 'react';
import { View, Image, TextInput, Text, Dimensions, Alert } from 'react-native';
import { Font } from 'expo';
import { connect } from 'react-redux';
import { LoginButton } from '../SubComponents/LoginComponent/LoginButton';
import { loginUser } from '../../actions'

class Login extends Component {
  static propTypes = {
    loginUser: PropTypes.func,
    navigate: PropTypes.func,
  };

  constructor(props) {
    super(props);

    this.state = {
      fontLoaded: false,
      email: '',
      password: '',
      showIndicator: false,
    };
  }

  // this is where we dispatch the action for saga to listen.
  login() {
    this.props.loginUser(); // ==> this is the action

    if (this.props.status === true) {
      // when the user click the button for the first time, the action is dispatched and returned a new state, but i don
      this.setState({ showIndicator: false });
      this.props.navigate('Dashboard');
    } else {
      Alert.alert('Enter your username and password correctly', '', [
        { text: 'Retry', onPress: () => {} },
      ]);
    }
  }

  render() {
    return (


        <LoginButton font={this.passFont()} onPress={() => this.login()} />
    );
  }
}


const mapStateToProps = state => ({
  status: state.auth.success,
});

export default connect(mapStateToProps, { loginUser })(Login);