import React, { Component } from 'react'
import {
  ScrollView,
  View,
  Text,
  Picker
} from 'react-native'
import { Button } from 'react-native-elements'
import { HeaderBackButton, StackActions } from 'react-navigation'
import { connect } from 'react-redux'
import { map, propOr, find, propEq, isEmpty, isNil, none, either, props } from 'ramda'

import css from './style'
import DefaultIndicator from '../../components/DefaultIndicator'

import {
  cambiarFormato,
  cambiarSoporte,
  cambiarTipoRespuesta
} from '../../redux/actions/nuevaSolicitud'


const makePicker = (onChange, dato, current) => (
  <Picker
    selectedValue={propOr(-1, 'id', current)}
    onValueChange={(itemValue) => onChange(find(propEq('id', itemValue), dato))}
  >
  <Picker.Item value={-1} label="Seleccionar" />
  {map((formato) =>
      (<Picker.Item label={formato.nombre} value={formato.id} key={formato.id} />), dato)}
  </Picker>)

const validateNext = none(either(isNil, isEmpty))
const navigateNext = (self, requeridos) => {
  if (validateNext(requeridos)) {
    const pushAction = StackActions.push({
      routeName: 'ConfirmarSolicitud'
    })
    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' })}
      />)
  });

  componentDidMount() {
  }

  render() {
    const self = this
    const spinner = <DefaultIndicator />
    const requeridos = props(['formato', 'soporte', 'tipoRespuesta'], this.props.nuevaSolicitud)
    const pickerFormato = makePicker(
      this.props.cambiarFormato,
      this.props.formatos.data,
      this.props.nuevaSolicitud.formato)
    const pickerSoporte = makePicker(
      this.props.cambiarSoporte,
      this.props.soportes.data,
      this.props.nuevaSolicitud.soporte)
    const pickerTipoRespuesta = makePicker(
      this.props.cambiarTipoRespuesta,
      this.props.tipoRespuestas.data,
      this.props.nuevaSolicitud.tipoRespuesta)

    return (
      <View style={[css.pane, css.view]}>
        <ScrollView>
          <Text style={css.label}>En qué formato le gustaría la respuesta?</Text>
          {this.props.formatos.loading ? spinner : pickerFormato }
          <Text style={css.label}>En qué medio desearia?</Text>
          {this.props.soportes.loading ? spinner : pickerSoporte }
          <Text style={css.label}>Cómo desea recibir la información?</Text>
          {this.props.tipoRespuestas.loading ? spinner : pickerTipoRespuesta }
        </ScrollView>
        <Button
          buttonStyle={css.button}
          title='REALIZAR SOLICITUD'
          onPress={() => navigateNext(self, requeridos)}
        />
      </View>)
  }
}

const mapStateToProps = (state) => ({
  institucion: state.nuevaSolicitud.institucion,
  token: state.autenticacion.token,
  formatos: state.formatos,
  soportes: state.soportes,
  tipoRespuestas: state.tipoRespuestas,
  nuevaSolicitud: state.nuevaSolicitud,
})

const mapDispatchToProps = (dispatch) => ({
  cambiarFormato: (formato) => dispatch(cambiarFormato(formato)),
  cambiarSoporte: (soporte) => dispatch(cambiarSoporte(soporte)),
  cambiarTipoRespuesta: (tipoRespuesta) => dispatch(cambiarTipoRespuesta(tipoRespuesta)),
})

export default connect(mapStateToProps, mapDispatchToProps)(NuevaSolicitudScreen)