import React, { Component } from 'react'
import {
  ScrollView,
  View,
  Text
} from 'react-native'
import { StackActions } from 'react-navigation'
import { SearchBar, ListItem, Button } from 'react-native-elements'
import { connect } from 'react-redux'
import { map, merge } from 'ramda'
import css from './style'
import DefaultIndicator from '../../components/DefaultIndicator'
import Pagination from '../../components/Pagination'
import { buscarInstituciones, fetchInstituciones } from '../../redux/actions/instituciones'
import { seleccionarInstitucion } from '../../redux/actions/nuevaSolicitud'

const navegarSolicitud = (self, institucion) => {
  self.props.seleccionar(institucion)
  const pushAction = StackActions.push({
    routeName: 'NuevaSolicitud'
  })

  self.props.navigation.dispatch(pushAction)
}


class SeleccionarInstitucion extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Nueva Solicitud',
    headerStyle: css.headerStyle,
    headerTitleStyle: css.headerTitleStyle,
    headerLeft:
      <Button
        icon={{ name: 'menu', size: 27, color: 'white' }}
        buttonStyle={{ backgroundColor: 'transparent' }}
        onPress={() => navigation.toggleDrawer()}
      />
  })

  componentDidMount() {
    this.props.cargar(this.props.token)
  }

  render() {
    const { token, buscar, busqueda } = this.props
    const self = this
    const items = map((institucion) => (
      <ListItem
        key={institucion.id}
        title={institucion.nombre}
        onPress={() => navegarSolicitud(self, institucion)}
      />
    ))

    const pagination = (show) => {
      if (show) {
        return (
        <Pagination
          next={() => buscar(token, merge(busqueda, { page: busqueda.page + 1 }))}
          previous={() => buscar(token, merge(busqueda, { page: busqueda.page - 1 }))}
          page={busqueda.page}
          totalPages={this.props.pages.totalPages}
          totalCount={this.props.pages.totalCount}
        />)
      }
    }

    const spinner = (<DefaultIndicator />)
    return (
      <ScrollView style={css.pane} contentContainerStyle={css.contentContainer} >
        <Text style={css.label}>A qué institución le solicitará información?</Text>
        <SearchBar
          lightTheme
          onChangeText={(text) => buscar(token, { page: 1, text })}
          icon={{ type: 'font-awesome', name: 'search' }}
          placeholder='Buscar Institucion'
        />
        <View>
        {this.props.loading ? spinner : items(this.props.instituciones)}
        {pagination(!this.props.loading)}
        </View>
      </ScrollView>)
  }
}
const mapStateToProps = (state) => ({
  token: state.autenticacion.token,
  loading: state.instituciones.loading,
  instituciones: state.instituciones.data,
  pages: state.instituciones.pages,
  busqueda: state.instituciones.busqueda
})

const mapDispatchToProps = (dispatch) => ({
  buscar: (token, parametros) => dispatch(buscarInstituciones(token, parametros)),
  cargar: (token) => dispatch(fetchInstituciones(token, { page: 1 })),
  seleccionar: (token) => dispatch(seleccionarInstitucion(token, { page: 1 })),
})
export default connect(mapStateToProps, mapDispatchToProps)(SeleccionarInstitucion)