import React, { Component } from 'react'
import {
  ScrollView,
  View,
  Text,
} from 'react-native'
import moment from 'moment'
import { Button } from 'react-native-elements'
import { HeaderBackButton, /*StackActions*/} from 'react-navigation'
import { connect } from 'react-redux'
import { merge, evolve } from 'ramda'
import { postSolicitud } from '../../redux/actions/solicitudes'
import css from './style'

const navegarSiguiente = (self, datos) => {
  const solicitud = {
    titulo: datos.solicitud.titulo,
    descripcion: datos.solicitud.descripcion,
    institucionID: datos.institucion.id,
    tipoRespuestaID: datos.tipoRespuesta.id,
    soporteID: datos.soporte.id,
    formatoID: datos.formato.id
  }
  const usuario = evolve({
    fechaNacimiento: fecha => moment(fecha, 'DD/MM/YY').format('YYYY-MM-DD')
  })(self.props.usuario)


  self.props.postSolicitud(self.props.token, merge(solicitud, usuario))
  self.props.navigation.navigate('MisSolicitudes')
}

class CofirmarSolicitudScreen 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
    return (
      <View style={[css.pane, css.view]}>
        <ScrollView style={css.pane} contentContainerStyle={css.contentContainer} >
            <Text style={css.label}> A qué institución?</Text>
            <Text style={css.texto}> {this.props.solicitud.institucion.nombre}</Text>
            <Text style={css.label}>Título</Text>
            <Text style={css.texto}> {this.props.solicitud.solicitud.titulo}</Text>
            <Text style={css.label}>Qué información necesita?</Text>
            <Text style={css.texto}> {this.props.solicitud.solicitud.descripcion}</Text>
            <Text style={css.label}>En qué formato le gustaría la respuesta?</Text>
            <Text style={css.texto}> {this.props.solicitud.formato.nombre}</Text>
            <Text style={css.label}>En qué medio desearia?</Text>
            <Text style={css.texto}> {this.props.solicitud.soporte.nombre}</Text>
            <Text style={css.label}>Cómo desea recibir la información?</Text>
            <Text style={css.texto}> {this.props.solicitud.tipoRespuesta.nombre}</Text>
        </ScrollView>

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

const mapStateToProps = (state) => ({
  solicitud: state.nuevaSolicitud,
  token: state.autenticacion.token,
  usuario: state.usuario.datos
})

const mapDispatchToProps = (dispatch) => ({
  postSolicitud: (token, solicitud) => dispatch(postSolicitud(token, solicitud))
})

export default connect(mapStateToProps, mapDispatchToProps)(CofirmarSolicitudScreen)