import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button,StyleSheet,TouchableOpacity } from 'react-native';
import {loginRequest} from './../redux/actions/auth';
import {bindActionCreators} from 'redux';

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }

    userLogin (e) {
        this.props.actions.loginRequest(this.state.username, this.state.password);
    }

    render () {
        return (
            <ScrollView style={{padding: 20,backgroundColor:'#ccc'}}>
                <View style = {styles.container}>

                    <View style={{marginLeft:15}}>
                        <Text>Email</Text>
                    </View>

                    <TextInput
                        style = {styles.input}
                        underlineColorAndroid = "transparent"
                        placeholder = "Enter username"
                        placeholderTextColor = "#9a73ef"
                        autoCapitalize = "none"
                        onChangeText={(text) => this.setState({ username: text })}/>

                    <View style={{marginLeft:15}}>
                        <Text>Password</Text>
                    </View>

                    <TextInput
                        style = {styles.input}
                        underlineColorAndroid = "transparent"
                        placeholder = "Enter Password > 6 letters"
                        placeholderTextColor = "#9a73ef"
                        autoCapitalize = "none"
                        onChangeText={(text) => this.setState({ password: text })}/>

                    <TouchableOpacity
                        style = {styles.submitButton}
                        onPress={(e) => this.userLogin(e)}>
                        <Text style = {styles.submitButtonText}> Submit </Text>
                    </TouchableOpacity>

                </View>
            </ScrollView>
        );
    }
}

 const mapStateToProps = (state, ownProps) => {
     return {
         isLoggedIn: state.auth.isLoggedIn
     };
 }

function mapDispatchToProps(dispatch){
    return {
        actions : bindActionCreators({
            loginRequest
        },dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

export function loginRequest(username,password) {
    alert("TEst"); // this alert comes
    return function (dispatch) {
        alert(`........Tracker......`); // execution doesn't reach here ,this alert doesn't com
        if(username == 'admin' && password == 'admin'){
            alert(`Login Success......`);
            dispatch({
                type : 'LOGIN_SUCCESS',
                msg  : 'Logged in successfully.'
            });
            resolve(true);
        } else {
            alert(`Login Failed......`);
            dispatch({
                type : 'LOGIN_FAIL',
                msg  : 'Please make sure you have entered valid credentials.'
            })
            reject(false);
        }
    };
}

export default function reducer(state = {},action){
    if(action.type == 'LOGIN_SUCCESS'){
        alert('login success');
        return Object.assign({},state,{
            isLoggedIn:true
        })

    } else if(action.type == 'LOGIN_FAIL'){
        alert('login failed');
        return Object.assign({},state,{
            isLoggedIn:false
        })

    } else {
        return state;
    }
}

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {Provider} from 'react-redux';
import store from './redux';
import Application from './pages/Application';

export default class App extends Component{
  render() {
    return (
      <Provider store={store}>
        <Application />
      </Provider>
    );
  }
}

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from  './reducers';

export default(initialState) => {
    return createStore(rootReducer, initialState, applyMiddleware(thunk));
}