import * as React from 'react';
import {Text, View, TextInput, TouchableOpacity, Image} from 'react-native';
import styles from "../../config/Styles";
import { connect } from 'react-redux';
import { login } from '../../redux/actions';
import Input from '../../components/Input';
import { withToastBannerToggler } from 'react-native-toast-banner';


class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            user: "",
            password: "",
            loader: false
        }
    }


    _getDisabled(){
        let disabled = false;
        if(!this.state.user)
            disabled = true;
        if(this.state.loader)
            disabled = true;
        if(!this.state.password || this.state.password.length <=5)
            disabled = true;
            console.log('entro')
            this.props.showBanner('holaa')
        return disabled;
    }

    _login(){
        this.setState({ loader : true })
        this.props.login(this.state).then(($result) => {
            //todo salio bien enviamos a otra vista donde veremos el perfild del usuario
        }).catch( (err) => {
            Alert.alert('Error',err.message);
        })
    }

    /** login() {
        this.props.navigation.navigate('HomeFinalCustomer')
        const { user, password, email, phone_number } = this.state
        try {
            // here place your signup logic
            console.log('user successfully signed up!: ', success)
        } catch (err) {
            console.log('error signing up: ', err)
        }
    } **/

    render(){
        return (
          <View style={styles.container}>
              <View style={styles.welcomeContainer}>
                  <Image
                      source={
                          __DEV__
                              ? require('../../assets/images/icon.png')
                              : require('../../assets/images/icon.png')
                      }
                      style={styles.welcomeImage}
                  />
              </View>
              <Text style={styles.text}>Usuario</Text>
              <View style={styles.inputView} >
                  <Input
                      placeholder="Usuario..."
                      value={this.state.user}
                      onChangeText={text => this.setState({user:text})}
                  />
              </View>
              <Text style={styles.text}>Password</Text>
              <View style={styles.inputView} >
                  <TextInput
                      secureTextEntry
                      style={styles.inputText}
                      placeholder="Password..."
                      placeholderTextColor="#003f5c"
                      onChangeText={text => this.setState({password:text})}/>
              </View>
              <TouchableOpacity style={styles.loginBtn}  disabled={this._getDisabled()} onPress={()=> this._login()}>
                  <Text style={styles.loginText}>LOGIN</Text>
              </TouchableOpacity>
              <TouchableOpacity  onPress={()=> this.props.navigation.navigate('RecoverPassword')}>
                  <Text style={styles.forgot}>Olvide mi password</Text>
              </TouchableOpacity>
          </View>
      );
    }
}

function MapStateToProps(state){
    return {
        user : state.session && state.session.user ? state.session.user : false
    }
}

export default connect(MapStateToProps, { login })(withToastBannerToggler(Login));