import React, { Component } from 'react';
import {
  Dimensions, AsyncStorage, View, Image, TouchableHighlight, Text, Button,
  ActivityIndicator, Keyboard, Alert
} from 'react-native';
import { TextField } from 'react-native-material-textfield';
import { FontAwesome } from '@expo/vector-icons';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';

import { ScreenOrientation } from 'expo';

import { AppConstants } from "../app-utils.js";

import Files from '../Files';

const { width, height} = Dimensions.get('window');

const SCREEN_WIDTH = width > height ? width : height;

const isSmallDevice = SCREEN_WIDTH <= 414;

import {
  login,
  updateFieldError,
  updateFieldLoginSuccess,
} from '../actions/LoginActions';


class Login extends Component {

  static navigationOptions = () => ({
    header: null
  });



  constructor(props) {
    super(props);

    this.onFocus = this.onFocus.bind(this);
    this._login = this._login.bind(this);
    this.onChangeText = this.onChangeText.bind(this);
    this.onSubmitEmail = this.onSubmitEmail.bind(this);
    this.onSubmitPassword = this.onSubmitPassword.bind(this);
    this.onAccessoryPress = this.onAccessoryPress.bind(this);

    this.emailRef = this.updateRef.bind(this, 'email');
    this.passwordRef = this.updateRef.bind(this, 'password');

    this.renderPasswordAccessory = this.renderPasswordAccessory.bind(this);

    this.state = {
      email: '',
      password: '',
      errors: {},
      secureTextEntry: true,
    }
  }

  onFocus() {
    let { errors = {} } = this.props;

    for (let name in errors) {
      let ref = this[name];

      if (ref && ref.isFocused()) {
        delete errors[name];
      }
    }

    this.setState({ errors });
  }

  onChangeText(text) {
    ['email', 'password']
      .map((name) => ({ name, ref: this[name] }))
      .forEach(({ name, ref }) => {
        if (ref.isFocused()) {
          this.setState({ [name]: text });
        }
      });
  }

  onSubmitEmail() {
    this.password.focus();
  }

  onSubmitPassword() {
    this.password.blur();
  }

  _navigateLoginNative() {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'LoginNative' })
      ]
    })
    this.props.navigation.dispatch(resetAction);
  }

  _login() {
    Keyboard.dismiss();
    let errors = {};
    ['email', 'password']
      .forEach((name) => {
        let value = this[name].value();
        if (!value) {
          if (name == 'email')
            errors[name] = 'Email obrigatório!';
          else
            errors[name] = 'Senha obrigatória!';
        }
      });
    this.setState({ errors });
    if (Object.keys(errors).length == 0) {
      let { navigate } = this.props.navigation;
      let { email, password } = this.state;
      this.props.login({ email, password, navigate });
    }
  }

  updateRef(name, ref) {
    this[name] = ref;
  }

  renderBtnLogin() {
    if (this.props.loginInProgress) {
      return (
        <ActivityIndicator color={AppConstants.secondaryColor} size="large" />
      );
    }


    return (
      <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
        <TouchableHighlight
          style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: AppConstants.secondaryColor, width: 300, height: 40 }}
          underlayColor={AppConstants.secondaryColor}
          onPress={() => this._login()}
        >
          <Text style={{ color: '#FFF', fontSize: 18, fontWeight: 'bold' }}>
            ENTRAR
          </Text>
        </TouchableHighlight>
      </View>
    );
  }

  onAccessoryPress() {
    this.setState(({ secureTextEntry }) => ({ secureTextEntry: !secureTextEntry }));
  }

  renderPasswordAccessory() {
    let { secureTextEntry } = this.state;

    let name = secureTextEntry ?
      'eye' :
      'eye-slash';

    return (
      <FontAwesome
        name={name}
        size={16}
        color={AppConstants.primaryColor}
        onPress={this.onAccessoryPress}
        suppressHighlighting
        disabled={this.props.loginInProgress}
      />
    );
  }


  componentWillUnmount() {
    Keyboard.dismiss();
  }

  componentDidUpdate() {
    if (this.props.error) {
      Alert.alert(
        '',
        this.props.error
      )
      this.props.updateFieldError('');
    }
    if (this.props.loginSuccess) {
      this.setState({ ['password']: '' });
      this.props.updateFieldLoginSuccess(false);
    }
  }


  render() {
    let { errors = {}, secureTextEntry, ...data } = this.state;
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: AppConstants.backgroundColor,
        }}

      >

        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            alignItems: 'center'

          }}

        >

        {
          isSmallDevice
          ?
          <Image
          style={{flex: 1, width: null, height: null}}
          source={Files.images.login_background}
          />
          :
          <Image
          style={{flex: 1, width: null, height: null}}
          source={Files.images.home_background}
          />
        }

       </View>
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            marginLeft: 30,
            marginRight: 30
          }}
        >
          <TextField
            ref={this.emailRef}
            value={data.email}
            label='E-mail'
            keyboardType='email-address'
            iconColor={AppConstants.primaryColor}
            textColor={AppConstants.primaryColor}
            tintColor='#FFF'
            baseColor='#FFF'
            fontSize={20}
            labelFontSize={12}
            autoCapitalize='none'
            autoCorrect={true}
            enablesReturnKeyAutomatically={true}
            onFocus={this.onFocus}
            onChangeText={this.onChangeText}
            onSubmitEditing={this.onSubmitEmail}
            returnKeyType='next'
            error={errors.email}
            disabled={this.props.loginInProgress}
          />

          <TextField
            ref={this.passwordRef}
            value={data.password}
            textColor={AppConstants.primaryColor}
            tintColor='#FFF'
            baseColor='#FFF'
            fontSize={20}
            labelFontSize={12}
            secureTextEntry={secureTextEntry}
            autoCapitalize='none'
            autoCorrect={false}
            enablesReturnKeyAutomatically={true}
            onFocus={this.onFocus}
            onChangeText={this.onChangeText}
            onSubmitEditing={this.onSubmitPassword}
            returnKeyType='done'
            label='Senha'
            error={errors.password}
            renderAccessory={this.renderPasswordAccessory}
            disabled={this.props.loginInProgress}
          />

          <View style={{ marginTop: 10 }}>
            {this.renderBtnLogin()}
          </View>

           <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
            <TouchableHighlight
              underlayColor='transparent'
              onPress={() => this._navigateLoginNative()}
            >
              <Text style={{ color: '#FFF', fontSize: 14 }}>
                Esqueci minha senha
             </Text>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    );
  }
}

const mapStateToProps = state => (
  {
    error: state.LoginReducer.error,
    loginInProgress: state.LoginReducer.loginInProgress,
    loginSuccess: state.LoginReducer.loginSuccess
  }
);

export default connect(mapStateToProps, {
  login,
  updateFieldError,
  updateFieldLoginSuccess,
})(Login);