nav.js

import React from 'react';
import { createStackNavigator, createDrawerNavigator, createSwitchNavigator } from 'react-navigation';
import LoginScreen from './screens/Login';
import FingerPrintScreen from './screens/FingerPrint';
import AuthLoadingScreen from './screens/AuthLoading';
import DashboardScreen from './screens/Dashboard';
import PendingListsScreen from './screens/PendingList';
import AuthSettingsScreen from './screens/AuthSettings';
import DrawerContainer from './components/DrawerContainer';
// import PushNotification from './screens/PushNotifications';
import Header from './components/Header';
import HeaderRight from './components/HeaderRight';
import PendingHeader from './components/PendingHeader';
import { THEME_COLOR } from './constants';


const pendingApprovals = createStackNavigator(
  {
    SecondScreen: {
      screen: PendingListsScreen,
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
        backgroundColor: THEME_COLOR,
      },
      headerLeft: <PendingHeader
        navigation={navigation}
        title="Pending Approvals"
      />,

    }),
  },
);

const Dashboard = createStackNavigator(
  {
    SecondScreen: {
      screen: DashboardScreen,
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
        backgroundColor: THEME_COLOR,
      },
      headerLeft: <Header navigation={navigation} />,
      headerRight: <HeaderRight />,
    }),
  },
);


const MainDrawer = createDrawerNavigator(
  {
    // Dashboard: {
    //   screen: DashboardScreen,

    // },
    Dashboard: {
      screen: Dashboard,

    },
    'Pending Approvals': {
      screen: pendingApprovals,
    },
    // 'Pending Approvals': {
    //   screen: PendingListsScreen,
    // },
    'Auth Settings': {
      screen: AuthSettingsScreen,
    },
    // Finance: {
    //   screen: DashboardScreen,
    // },
    // Innovation: {
    //   screen: DashboardScreen,
    // },
    // Payroll: {
    //   screen: DashboardScreen,
    // },
    // 'Office Management': {
    //   screen: DashboardScreen,
    // },
    // 'System Audit': {
    //   screen: DashboardScreen,
    // },
    // 'Find Your Colleague': {
    //   screen: DashboardScreen,
    // },
    // 'Converge Report': {
    //   screen: DashboardScreen,
    // },
    // 'Group News': {
    //   screen: DashboardScreen,
    // },
    // 'Company Report': {
    //   screen: DashboardScreen,
    // },
    // 'Events Calendar': {
    //   screen: DashboardScreen,
    // },
  },
  {
    drawerPosition: 'left',
    contentComponent: DrawerContainer,
  },
);

const AuthStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null,
    },
  },
});

const AppStack = createStackNavigator({
  MainDrawer: {
    screen: MainDrawer,
    navigationOptions: ({ navigation }) => ({
      header: null,
      // headerStyle: {
      //   backgroundColor: THEME_COLOR,
      // },
      // headerLeft: <Header navigation={navigation} />,
      // headerRight: <HeaderRight />,
    }),
  },
  FingerPrint: {
    screen: FingerPrintScreen,
    navigationOptions: {
      header: null,
    },
  },
});

export const AppNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  },
);