'use strict'

import React, { Component } from 'react';
import { Platform } from 'react-native';

import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import IconFont from 'react-native-vector-icons/FontAwesome';

import ProfileScreen from "../screens/Profile";
import InicialPublishScreen from "../screens/InicialPublish";
import GoogleMapsScreen from "../screens/GoogleMaps";
import Colors from "../constants/Colors";

export default createMaterialBottomTabNavigator(
    {
        Home: {
            screen: GoogleMapsScreen,
            navigationOptions: {
                tabBarLabel: '',
                tabBarIcon: ({ focused }) => (
                    <Icon
                        size={24}
                        name={ Platform.OS === 'ios' ? (focused ? 'home' : 'home-outline') : (focused ? 'home' : 'home-outline') }
                        style={{ color: Colors.Black }} />
                )
            }
        },
        Publicação: {
            screen: InicialPublishScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => (
                    <Icon
                        size={24}
                        name={ Platform.OS === 'ios' ? (focused ? 'camera' : 'camera-outline') : (focused ? 'camera' : 'camera-outline') }
                        style={{ color: Colors.Black }} />
                )
            }
        },
        Perfil: {
            screen: ProfileScreen,
            navigationOptions: {
                tabBarIcon: ({ focused }) => (
                    <IconFont
                        size={24}
                        name={ Platform.OS === 'ios' ? (focused ? 'user' : 'user-o') : (focused ? 'user' : 'user-o') }
                        style={{ color: Colors.Black }} />
                )
            }
        },
    },
    {
        initialRouteName: 'Home',
        labeled: '',
        activeColor: Colors.Black,
        inactiveColor: Colors.GrayDivider,
        barStyle: {
            backgroundColor: Colors.White
        },
    }
);

// Dependência
yarn add react-navigation-material-bottom-tabs  ( opcional -> react-native-paper )