import React, { Component } from 'react'
import ReactNative, {
  ScrollView,
  View,
  Text,
  TextInput,
  Keyboard,
  Picker
} from 'react-native'
import DatePicker from 'react-native-datepicker'
import { Button } from 'react-native-elements'
import {
  StackActions,
  NavigationActions,
  HeaderBackButton
} from 'react-navigation'
import { none, either, isNil, isEmpty, curry, map, props } from 'ramda'
import { connect } from 'react-redux'
import moment from 'moment'
import { PAISES } from '../../constants/paises'
import { SEXOS } from '../../constants/sexos'
import css from './style'
import { changeScrollView } from '../../redux/actions/events'
import { cambiarDatosUsuario, guardarUsuarioLocal } from '../../redux/actions/usuario'
import { seleccionarDepartamento, seleccionarDistrito } from '../../redux/actions/auxiliares'

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'DrawerNavigator' })],
  key: null
})
const validateNext = none(either(isNil, isEmpty))

const navegarSiguiente = (self, requeridos) => {
  if (validateNext(requeridos)) {
    self.props.navigation.dispatch(resetAction)
    self.props.guardarUsuarioLocal(self.props.usuario)
  }
}

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

  componentDidMount() {
    this.keyboardDidShowListener =
      Keyboard.addListener('keyboardDidShow', this.onKeyboardShow.bind(this))

    this.keyboardDidHideListener =
      Keyboard.addListener('keyboardDidHide', this.onKeyboardHide.bind(this))
  }


  componentWillUnmount() {
    this.keyboardDidShowListener.remove()
    this.keyboardDidHideListener.remove()
  }

  onKeyboardShow(event) {
    const height = Math.floor(event.endCoordinates.height)
    const style = { paddingBottom: height }
    this.props.changeScrollView({ style })
  }

  onKeyboardHide() {
    const style = { paddingBottom: 10 }
    this.props.changeScrollView({ style })
  }


  render() {
    this.refs = {}
    const self = this
    const focusNextField = (id) => () => self.refs[id].focus()
    const actualizar = curry((nombre, dato) => this.props.cambiarDatosUsuario({ [nombre]: dato }))
    const datos = this.props.usuario.datos
    const requeridos = props(['nombre', 'apellido', 'sexo'], datos)

    const scrollTo = (nombre) => {
      const scroll = self.refs.scroll
      const scrollNode = ReactNative.findNodeHandle(scroll)
      const doScroll = (x, y) => scroll.scrollTo({ x: 0, y: y - 40, animate: true })
      self.refs[nombre].measureLayout(scrollNode, doScroll)
    }

    return (
      <View style={[css.pane, css.view]}>
        <ScrollView
          contentContainerStyle={[css.contentContainer, this.props.scrollViewStyle]}
          keyboardShouldPersistTaps='handled'
          ref={ref => { self.refs.scroll = ref }}
        >
        <Text style={css.label}> Correo Electrónico</Text>
        <Text> {this.props.usuario.datos.mail}</Text>

        <Text style={css.label}>Nombre</Text>
        <TextInput
          autoCapitalize='words'
          blurOnSubmit={false}
          onChangeText={actualizar('nombre')}
          onFocus={() => scrollTo('nombre')}
          onSubmitEditing={focusNextField('apellido')}
          ref={(ref) => { self.refs.nombre = ref }}
          returnKeyType='next'
          style={[css.input, css.oneline]}
          underlineColorAndroid="transparent"
          value={self.props.usuario.datos.nombre}
        />

        <Text style={css.label}>Apellido</Text>
        <TextInput
          autoCapitalize='words'
          blurOnSubmit={false}
          onChangeText={actualizar('apellido')}
          onFocus={() => scrollTo('apellido')}
          onSubmitEditing={focusNextField('domicilio')}
          ref={(ref) => { self.refs.apellido = ref }}
          returnKeyType='next'
          style={[css.input, css.oneline]}
          underlineColorAndroid="transparent"
          value={self.props.usuario.datos.apellido}
        />

        <Text style={css.label}>Domicilio Real</Text>
        <TextInput
          autoCapitalize='words'
          blurOnSubmit={false}
          onChangeText={actualizar('domicilio')}
          onFocus={() => scrollTo('domicilio')}
          onSubmitEditing={focusNextField('telefono')}
          ref={(ref) => { self.refs.domicilio = ref }}
          returnKeyType='next'
          style={[css.input, css.oneline]}
          underlineColorAndroid="transparent"
          value={self.props.usuario.datos.domicilio}
        />

        <Text style={css.label}>Telefono</Text>
        <TextInput
          keyboardType='phone-pad'
          onChangeText={actualizar('telefono')}
          onFocus={() => scrollTo('telefono')}
          ref={(ref) => { self.refs.telefono = ref }}
          style={[css.input, css.oneline]}
          underlineColorAndroid="transparent"
          value={self.props.usuario.datos.telefono}
        />

        <Text style={css.label}>Sexo</Text>
        <Picker
          onValueChange={(value) => {
            actualizar('sexo', value)
            actualizar('especificarSexo', value)
          }}
          selectedValue={this.props.usuario.datos.sexo}
        >{
          map((value) => <Picker.Item key={value} value={value} label={value} />,
              SEXOS)
          }
        </Picker>

        <Text style={css.label}>Nacionalidad</Text>
        <Picker
          onValueChange={actualizar('nacionalidad')}
          selectedValue={this.props.usuario.datos.nacionalidad}
        >{
          map((value) => <Picker.Item key={value} value={value} label={value} />,
              Object.values(PAISES))
          }
        </Picker>

        <Text style={css.label}>Departamento</Text>
        <Picker
          onValueChange={self.props.seleccionarDepartamento}
          selectedValue={self.props.departamentos.seleccionado}
        >{
          map(({ id, nombre }) =>
            <Picker.Item key={id} value={id} label={nombre} />,
          Object.values(self.props.departamentos.data))
        }
        </Picker>

        <Text style={css.label}>Distrito</Text>
        <Picker
          onValueChange={self.props.seleccionarDistrito}
          selectedValue={self.props.distritos.seleccionado}
        >{
          map(({ id, nombre }) => <Picker.Item key={id} value={id} label={nombre} />,
          Object.values(self.props.distritosFiltrados))
        }
        </Picker>

        <Text style={css.label}>Fecha de Nacimiento</Text>
        <DatePicker
          style={{ width: undefined }}
          date={self.props.usuario.datos.fechaNacimiento}
          mode="date"
          placeholder="select date"
          format="DD/MM/YYYY"
          minDate="01/01/1910"
          maxDate={moment().format('DD/MM/YY')}
          confirmBtnText="Confirmar"
          cancelBtnText="Cancelar"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0
            },
            dateInput: {
              marginLeft: 36
            }
          }}
          onDateChange={actualizar('fechaNacimiento')}
        />
        </ScrollView>
        <Button
          buttonStyle={css.button}
          onPress={() => navegarSiguiente(self, requeridos)}
          title='SIGUIENTE'
        />
      </View>)
  }
}

const mapStateToProps = (state) => ({
  usuario: state.usuario,
  scrollViewStyle: state.events.scrollView.style,
  departamentos: state.auxiliares.departamentos,
  distritos: state.auxiliares.distritos,
  distritosFiltrados: state.auxiliares.distritosFiltrados,
})

const mapDispatchToProps = (dispatch) => ({
    cambiarDatosUsuario: (datos) => dispatch(cambiarDatosUsuario(datos)),
    changeScrollView: (style) => dispatch(changeScrollView(style)),
    seleccionarDistrito: (id) => dispatch(seleccionarDistrito(id)),
    seleccionarDepartamento: (id) => dispatch(seleccionarDepartamento(id)),
    guardarUsuarioLocal: (datos) => dispatch(guardarUsuarioLocal(datos))
})

export default connect(mapStateToProps, mapDispatchToProps)(DatosUsuario)