import React, { Component } from 'react'
import { Provider } from 'react-redux'
import {
  createDrawerNavigator,
  createStackNavigator,
} from 'react-navigation'

import moment from 'moment'
import 'moment/locale/es'

import CustomDrawerContentComponent from './components/Menu'
import store from './redux/store'
import MainScreen from './screens/MisSolicitudes'
import NuevaSolicitud from './screens/NuevaSolicitud'
import DetalleSolicitud from './screens/DetalleSolicitud'
import Ayuda from './screens/Ayuda'
import BuscarSolicitudes from './screens/BuscarSolicitudes'
import ListaInstituciones from './screens/ListaInstituciones'
import ReferenciasSolicitud from './screens/ReferenciasSolicitud'
import ConfirmarSolicitud from './screens/ConfirmarSolicitud'
import CorreoUsuario from './screens/CorreoUsuario'
import DatosUsuario from './screens/DatosUsuario'
import Splash from './screens/Splash'

import css from './common/styles'

moment.locale('es-ES')


export default class App extends Component {

  render() {
    // buscar solicitudes
    // estadisticas
      const HomeScreenNavigator = createStackNavigator({
        Main: { screen: MainScreen },
        DetalleSolicitud: { screen: DetalleSolicitud }
      })

      const DatosUsuarioNavigator = createStackNavigator({
        CorreoUsuario: { screen: CorreoUsuario },
        DatosUsuario: { screen: DatosUsuario }
      })

      const NuevaSolicitudNavigator = createStackNavigator({
        ListaInstituciones: { screen: ListaInstituciones },
        NuevaSolicitud: { screen: NuevaSolicitud },
        ReferenciasSolicitud: { screen: ReferenciasSolicitud },
        ConfirmarSolicitud: { screen: ConfirmarSolicitud },
      })

      const BuscarSolicitudesNavigator = createStackNavigator({
        BuscarSolicitudes: { screen: BuscarSolicitudes },
        DetalleSolicitud: { screen: DetalleSolicitud }
      })
      const AyudaNavigator = createStackNavigator({
        Ayuda: { screen: Ayuda },
      })

      const DrawerNavigator = createDrawerNavigator({
        MisSolicitudes: {
          screen: HomeScreenNavigator,
          navigationOptions: () => ({
              title: 'Mis Solicitudes',
              headerStyle: css.headerStyle,
              headerTitleStyle: css.headerTitleStyle,
          }),
        },
        NuevaSolicitud: {
          screen: NuevaSolicitudNavigator,
          navigationOptions: () => ({
            title: 'Nueva Solicitud',
            headerStyle: css.headerStyle,
            headerTitleStyle: css.headerTitleStyle
          }),
        },
        BuscarSolicitudes: {
          screen: BuscarSolicitudesNavigator,
          navigationOptions: () => ({
            title: 'Buscar Solicitudes',
            headerStyle: css.headerStyle,
            headerTitleStyle: css.headerTitleStyle
          }),
        },
        AyudaNavigator: {
          screen: AyudaNavigator,
          navigationOptions: () => ({
            title: 'Ayuda y Estadísticas',
          })
        }
      }, {
        contentComponent: CustomDrawerContentComponent
      })

      const MainNavigator = createStackNavigator({
        Splash: {
          screen: Splash,
        },
        DatosUsuarioNavigator: {
          screen: DatosUsuarioNavigator
        },
        DrawerNavigator: { screen: DrawerNavigator }
      }, {
        headerMode: 'none'
      })
    return (
      <Provider store={store}>
        <MainNavigator />
      </Provider>
    )
  }
}