import React, { Component } from 'react';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import Register from './src/containers/Register';
import Home from './src/Home';
import Timeline from './src/components/Timeline';
import Calendar from './src/components/Calendar';
import Icon from 'react-native-vector-icons/FontAwesome';

const App = StackNavigator({
	Login: {
		screen: Login,
		navigationOptions: {
			header: null
		}
	},
	Register: {
		screen: Register,
		navigationOptions: {
			header: null
		}
	},
	Home: {
		screen: TabNavigator,
		navigationOptions: {
			header: null
		}
	}
});

const TabDashboard = TabNavigator(
	{
		Home: {
			screen: App,
			navigationOptions: {
				tabBarLabel: 'Dashboard',
				tabBarIcon: ({ tintColor }) =>
				<Icon name="home" size={20} style={{ color: tintColor }} />
			}
		},
		Timeline: {
			screen: Timeline,
			navigationOptions: {
				tabBarLabel: 'Timeline',
				tabBarIcon: ({ tintColor }) =>
				<Icon name="clock-o" size={20} style={{ color: tintColor }} />
			}
		},
		Calendar: {
			screen: Calendar,
			navigationOptions: {
				tabBarLabel: 'Calendar',
				tabBarIcon: ({ tintColor }) =>
				<Icon name="calendar" size={20} style={{ color: tintColor }} />
			}
		},
	},
	{
		lazy: true,
		tabBarPosition: 'top',
		tabBarOptions: {
			activeTintColor: '#ffffff',
			inactiveTintColor : '#ff5983',
			style: {
				backgroundColor: '#f50057'
			},
			showIcon: true
		}
	}
)

export default TabDashboard;