import React from 'react';
import Ionicons  from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator, createAppContainer, createStackNavigator, createSwitchNavigator } from 'react-navigation';
import HomeScreen from './Home/HomeScreen';
import AccountScreen from './Account/AccountScreen';
import OrderScreen from './Order/OrderScreen';
import BelanceScreen from './Belance/BelanceScreen';
import MyInboxScreen from './Inbox/MyInboxScreen';

import Member from './User/Member'
import Register from './User/Register'
import Login from './User/Login'
import Verifikasi from './User/Verifikasi'
import LupaPassword from './User/LupaPassword'






const UserAppNavigator = createStackNavigator({
  Member: {
    screen: Member,
  },
  Register: {
    screen: Register,
  },
  Login: {
    screen: Login,
  },
  Verifikasi: {
    screen: Verifikasi,
  },
  LupaPassword: {
    screen: LupaPassword,
  },
});


const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let iconName;
  if (routeName === 'Home') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  } else if (routeName === 'Order') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  } else if (routeName === 'Balance') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  } else if (routeName === 'Inbox') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  } else if (routeName === 'Account') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  }

  // You can return any component that you like here!
  return <Ionicons name={iconName} size={25} color={tintColor} />;
};

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Order: {
    screen: OrderScreen,
  },
  Balance: {
    screen: BelanceScreen,
  },
  Inbox: {
    screen: MyInboxScreen,
  },
  Account: {
    screen: AccountScreen,
  }
},
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }
  }
);



// const tabNavigator = createAppContainer(TabNavigator);


export default createAppContainer(createSwitchNavigator(
  {
    Tab: TabNavigator,
    User: UserAppNavigator
  },
  {
    initialRouteName: 'Tab',
  }
));