import React, { Component } from 'react'
import { Platform, AsyncStorage } from 'react-native'
import { TabNavigator, TabBarBottom, TabBarTop } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'
import Camera from '../screens/camera'
import Perfil from '../screens/perfil'
import Pesquisar from '../screens/pesquisar'
import Ranking from '../screens/ranking'
import TimelineNavigator from './timeline'

const tabs = {
    Timeline: {
        screen: TimelineNavigator,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-home-outline" size={30} color={tintColor} />
            )
        }
    },

    Pesquisar: {
        screen: Pesquisar,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-search-outline" size={30} color={tintColor} />
            )
        }
    },

    Camera: {
        screen: Camera,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-camera-outline" size={30} color={tintColor} />
            )
        }
     },
    Ranking: {
        screen: Ranking,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-star-outline" size={30} color={tintColor} />
            )
        }
    },

    Perfil: {
        screen: Perfil,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-person-outline" size={30} color={tintColor} />
            )
        }
    }
}

const opts = {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: true,
    tabBarOptions: {
        showLabel: false,
        activeTintColor: '#000',
    }
}

const navegadorRoot = TabNavigator(tabs, opts)
export default navegadorRoot;