import React, { Component } from 'react'
import {
  ScrollView,
  View,
  Text,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native'
import { Button } from 'react-native-elements'
import { HeaderBackButton, StackActions } from 'react-navigation'

import { connect } from 'react-redux'
import css from './style'
import { cambiarDatosUsuario } from '../../redux/actions/usuario'

/* eslint-disable max-len */
/* eslint-disable no-useless-escape */
const validateEmail = (email) => {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(String(email).toLowerCase())
}
/* eslint-enable no-useless-escape */
/* eslint-enable max-len */

const navegarSiguiente = (self, texto) => {
  const pushAction = StackActions.push({
    routeName: 'DatosUsuario'
  })

  if (validateEmail(texto)) {
    self.props.navigation.dispatch(pushAction)
  } else {
    console.log('no pasar')
  }
}

class DatosUsuario extends Component {
  static navigationOptions = ({ navigation }) => ({
      title: 'Datos del Solicitante',
      headerStyle: css.headerStyle,
      headerTitleStyle: css.headerTitleStyle,
      headerLeft: (
        <HeaderBackButton
          tintColor='#FFFFFF'
          onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })}
        />)
  });

  render() {
    const self = this
    return (
      <View style={[css.pane, css.view]}>
        <ScrollView contentContainerStyle={css.contentContainer} >
          <KeyboardAvoidingView
            keyboardVerticalOffset={-60}
            behavior="position" enabled
          >
            <Text style={[css.label]}> Correo Electronico</Text>
            <TextInput
              keyboardType='email-address'
              style={[css.input, css.oneline]}
              underlineColorAndroid="transparent"
              autoCapitalize='none'
              onChangeText={(mail) => self.props.cambiarDatosUsuario({ mail })}
            />

          </KeyboardAvoidingView>
        </ScrollView>

        <Button
          buttonStyle={css.button}
          onPress={() => navegarSiguiente(self, self.props.usuario.datos.mail)}
          title='SIGUIENTE'
        />
      </View>)
  }
}

const mapStateToProps = (state) => ({
  usuario: state.usuario
})

const mapDispatchToProps = (dispatch) => ({
  cambiarDatosUsuario: (datos) => dispatch(cambiarDatosUsuario(datos)),
})

export default connect(mapStateToProps, mapDispatchToProps)(DatosUsuario)