/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button } from 'react-native';
import { createAppContainer, 
         createStackNavigator, 
         StackActions, 
         NavigationActions, 
         createBottomTabNavigator
} from 'react-navigation';
import HomeScreen from './HomeScreen';
import SignInScreen from './authenticate/SignInScreen';
import SignUpScreen from './authenticate/SignUpScreen';
import MainScreen from './mainScreens/MainScreen';
import QuotesScreen from './mainScreens/QuotesScreen';
import TimeScreen from './mainScreens/TimeScreen';
import SettingsScreen from './mainScreens/SettingsScreen';
import AddTimes from './mainScreens/AddTimes';
import ProfileScreen from './mainScreens/ProfileScreen';
import Icon from 'react-native-ionicons';

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    SignIn: SignInScreen,
    SignUp: SignUpScreen,
    AddTimes: AddTimes,
    Profile: ProfileScreen,
    Main: {
      screen: createBottomTabNavigator({
        Main: {
          screen: MainScreen,
          navigationOptions: {
            tabBarLabel:"Home",
            tabBarIcon: ({ tintColor }) => (
            <Icon name="home" size={20}/>
            )
          },
        },
        Quotes: {
          screen: QuotesScreen,
            navigationOptions: {
            tabBarLabel:"Quotes",
            tabBarIcon: ({ tintColor }) => (
            <Icon name="list" size={20}/>
            )
          },
        },
/*        Settings: {
          screen: SettingsScreen,
            navigationOptions: {
            tabBarLabel:"Settings",
            tabBarIcon: ({ tintColor }) => (
            <Icon name="settings" size={20}/>
            )
          },
        },*/
        Times: {
          screen: TimeScreen,
            navigationOptions: {
              tabBarLabel:"Times",
              tabBarIcon: ({ tintColor }) => (
              <Icon name="time" size={20}/>
            )
          },
        },
        Profile: {
          screen: ProfileScreen,
            navigationOptions: {
              tabBarLabel:"Profile",
              tabBarIcon: ({ tintColor }) => (
              <Icon name="person" size={20}/>
            )
          },
        }
      })
    }
  },
  {
    initialRouteName: 'Home',
  }
);

const TabNavigator = createBottomTabNavigator ({
  Main: MainScreen,
  Settings: SettingsScreen,
});


const AppContainer = createAppContainer(RootStack);
const TabContainer = createAppContainer(TabNavigator);

export default class App extends React.Component {
  render() {
    return(
      <>
        < AppContainer/>
      </>
    );
  }
}