routes

import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import Icon from 'react-native-vector-icons/FontAwesome';
import IconT from 'react-native-vector-icons/FontAwesome5';
import IconO from 'react-native-vector-icons/Entypo';


import Reactotron from "./Config/ReactotronConfig";
import Reducers from '../Reducers';

import "./components/sidebar";
import HeaderComponent from './components/Header/Header';

import Inicio from './pages/Inicio/Inicio';
import ShowNews from './pages/ShowNews/ShowNews';
import NoticiaView from './pages/NoticiaView/NoticiaView';
import facebookAccess from './pages/Home/facebookAccess/facebookAccess';
import youtubeAccess from './pages/Home/youtubeAccess/youtubeAccess';
import instagramAccess from './pages/Home/instagramAccess/instagramAccess';
import Onibus from './pages/Onibus/Onibus';
import Cinema from './pages/Cinema/Cinema';
import AutoresNews from './pages/AutoresNews/AutoresNews';
import Eventos from './pages/Eventos/Eventos';
import Home from './pages/Home/Home';
import AllNews from './pages/AllNews/AllNews';
import Guia from "./pages/Guia/Guia";
import ClubeOn from "./pages/ClubeOn/ClubeOn";
import Radio from './pages/Radio/Radio';
import Autor from './pages/Autor/Autor';
import Utilidades from './pages/Utilidades/Utilidades';

const store = createStore( Reducers, Reactotron, applyMiddleware(ReduxThunk));

const Bottom = createBottomTabNavigator(
  {
    Home:{
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <Icon name={focused ? 'home' : 'home'} size={25} style = {{ color: tintColor }}/>
        )
      },
    },
    Autor: {
      screen: Autor,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <IconO name={focused ? 'users' : 'users'} size={25} style = {{ color: tintColor }}/>
        )
      },
    },
    Guia: {
      screen: Guia,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <IconT name={focused ? 'search-location' : 'search-location'} size={25} style = {{ color: tintColor }}/>
        )
      },
    },
    ClubeOn: {
      screen: ClubeOn,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <IconT name={focused ? 'gifts' : 'gifts'} size={25} style = {{ color: tintColor }}/>
        )
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <IconT name={focused ? 'broadcast-tower' : 'broadcast-tower'} size={25} style = {{ color: tintColor }}/>
        )
      },
    },

    Utilidades: {
      screen: Utilidades,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <IconT name={focused ? 'star' : 'star'} size={25} style = {{ color: tintColor }}/>
        )
      },
    }
    },
{
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: '#009Fe3',
    inactiveTintColor: '#646464',
    style: {
      backgroundColor: "#EEE",
      borderTopWidth: 0,
      elevation: 0,
    },
  },
},
{
  headerLayoutPreset: 'center',
},
);

const Routes = createStackNavigator(
  {
    Inicio: {
      screen:Inicio,
      navigationOptions: {
        header: null,
      },
    },
    Bottom:{
      screen:Bottom,
      navigationOptions: HeaderComponent,
    },
    ShowNews:{
      screen:ShowNews,
      navigationOptions: HeaderComponent,
    },
    NoticiaView:{
      screen:NoticiaView,
      navigationOptions: HeaderComponent,
    },
    AllNews: {
      screen: AllNews,
      navigationOptions: HeaderComponent,
    },
    AutoresNews:{
      screen: AutoresNews,
      navigationOptions: HeaderComponent,
    },
    facebookAccess:{
      screen:facebookAccess,
      navigationOptions: HeaderComponent,
    },
    instagramAccess:{
      screen:instagramAccess,
      navigationOptions: HeaderComponent,
    },
    youtubeAccess: {
      screen: youtubeAccess,
      navigationOptions: HeaderComponent,
    },
    Onibus: {
      screen: Onibus,
      navigationOptions: HeaderComponent,
    },
    Cinema: {
      screen: Cinema,
      navigationOptions: HeaderComponent,
    },
    Eventos: {
      screen: Eventos,
      navigationOptions: HeaderComponent,
    }
  },
 {
  headerLayoutPreset: 'center',
 },
);

const Pages = createAppContainer(Routes);

export default class routes extends Component {
  render() {
    return (
      <Provider store={store}>
        <Pages />
      </Provider>
    );
  }
}