import 'moment/locale/es'
import React, { Component } from 'react'
import {
  View,
  Text,
  SectionList
} from 'react-native'
import { connect } from 'react-redux'
import { StackActions } from 'react-navigation'
import { ListItem, Button } from 'react-native-elements'
import {
  verDetalleSolicitud,
  cambiarPaginaSolicitud,
  cambiarBusquedaSolicitud
} from '../../redux/actions/solicitudes'
import DefaultIndicator from '../../components/DefaultIndicator'
import Pagination from '../../components/Pagination'

import css from './style'

// AIP Movil
const navegarSolicitud = (self, solicitud) => {
  self.props.verDetalleSolicitud(solicitud)
  const pushAction = StackActions.push({
    routeName: 'DetalleSolicitud',
    params: solicitud
  })

  self.props.navigation.dispatch(pushAction)
}

const renderSectionHeader = ({ section }) =>
  (<Text style={css.sectionHeader}>
    {section.title}
  </Text>)

const renderItem = function (self) {
  return ({ item }) => (
    <ListItem
      key={item.id}
      title={item.titulo}
      subtitle={`# ${item.id}`}
      badge={item.formato ? { value: item.formato.nombre } : null}
      titleStyle={{ fontWeight: 'bold' }}
      subtitleStyle={{ fontWeight: 'normal' }}
      onPress={() => navegarSolicitud(self, item)}
    />
  )
}

class MisSolicitudes extends Component {

  static navigationOptions = ({ navigation }) => ({
    title: 'Mis solicitudes',
    headerStyle: css.headerStyle,
    headerTitleStyle: css.headerTitleStyle,
    headerLeft:
      <Button
        icon={{ name: 'menu', size: 27, color: 'white' }}
        buttonStyle={{ backgroundColor: 'transparent' }}
        onPress={() => navigation.toggleDrawer()}
      />
  });

  componentWillMount() {
    this.props.cambiarPaginaSolicitud({
       by_usuario: this.props.usuario.datos.mail,
       page: 1,
       by_titulo: null
     })
  }

  render() {
    const busqueda = this.props.busqueda
    const self = this
    const pagination = (show) => {
      if (show) {
        return (
        <Pagination
          next={() => self.props.cambiarPaginaSolicitud({ page: busqueda.page + 1 })}
          previous={() => self.props.cambiarPaginaSolicitud({ page: busqueda.page - 1 })}
          page={busqueda.page}
          totalPages={this.props.pages.totalPages}
          totalCount={this.props.pages.totalCount}
        />)
      }
    }
    const spinner = <DefaultIndicator />
    const section = (
      <SectionList
        sections={this.props.tabla}
        renderItem={renderItem(this)}
        renderSectionHeader={renderSectionHeader}
        keyExtractor={(item, index) => index}
        ListFooterComponent={() => pagination(!self.props.loading)}
      />)
    return (
      <View style={[css.pane, css.container]}>
        {this.props.loading ? spinner : section}
      </View>
    )
  }
}

const mapStateToProps = (state) => ({
    token: state.autenticacion.token,
    loading: state.solicitudes.loading,
    tabla: [state.solicitudes.pendientes, state.solicitudes.finalizadas],
    usuario: state.usuario,
    busqueda: state.solicitudes.busqueda,
    pages: state.solicitudes.pages,
})

const mapDispatchToProps = dispatch => ({
  cambiarBusquedaSolicitud: (params) => dispatch(cambiarBusquedaSolicitud(params)),
  verDetalleSolicitud: (solicitud) => dispatch(verDetalleSolicitud(solicitud)),
  cambiarPaginaSolicitud: (busqueda) => dispatch(cambiarPaginaSolicitud(busqueda))

})


export default connect(mapStateToProps, mapDispatchToProps)(MisSolicitudes)