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 { none, either, isNil, isEmpty, props } from 'ramda'

import { connect } from 'react-redux'
import css from './style'
import { cambiarTitulo, cambiarDescripcion } from '../../redux/actions/nuevaSolicitud'

const validateNext = none(either(isNil, isEmpty))
const navegarSiguiente = (self, requeridos) => {
  const pushAction = StackActions.push({
    routeName: 'ReferenciasSolicitud'
  })

  if (validateNext(requeridos)) {
    self.props.navigation.dispatch(pushAction)
  }
}

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

  render() {
    const self = this
    const requeridos = props(['titulo', 'descripcion'], this.props.solicitud.solicitud)
    return (
      <View style={[css.pane, css.view]}>
        <ScrollView contentContainerStyle={css.contentContainer} >
        <KeyboardAvoidingView keyboardVerticalOffset={-60} behavior="position" enabled >
            <Text style={[css.label]}> A qué institución?</Text>
            <Text> {this.props.institucion.nombre}</Text>
            <Text style={css.label}>Titulo</Text>
            <TextInput
              style={[css.input, css.oneline]}
              underlineColorAndroid="transparent"
              value={this.props.solicitud.solicitud.titulo}
              onChangeText={this.props.cambiarTitulo}
            />
            <Text style={css.label}>Qué información necesita?</Text>
            <View style={css.textAreaContainer} >
              <TextInput
                style={css.textArea}
                value={this.props.solicitud.solicitud.descripcion}
                underlineColorAndroid="transparent"
                placeholder='Cuerpo de la Solicitud'
                placeholderTextColor={'grey'}
                numberOfLines={40}
                onChangeText={this.props.cambiarDescripcion}
                multiline
              />
            </View>

          </KeyboardAvoidingView>
        </ScrollView>

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

const mapStateToProps = (state) => ({
  institucion: state.nuevaSolicitud.institucion,
  solicitud: state.nuevaSolicitud,
})

const mapDispatchToProps = (dispatch) => ({
  cambiarTitulo: (titulo) => dispatch(cambiarTitulo(titulo)),
  cambiarDescripcion: (descripcion) => dispatch(cambiarDescripcion(descripcion)),
})

export default connect(mapStateToProps, mapDispatchToProps)(NuevaSolicitudScreen)