import React, { Component } from 'react'
import {createAppContainer, createStackNavigator, StackActions, NavigationActions, createBottomTabNavigator, createSwitchNavigator, withNavigation} from 'react-navigation';
import Home from '../screens/Home';
import Toko from '../screens/Toko';
import Cart from '../cart/Cart';
import Profile from '../screens/Profile';
import Vendor from '../components/Vendor';
import Notifikasi from '../components/Notifikasi';
import Kendaraan from '../components/kendaraan/Kendaraan';
import Mainananak from '../components/anak&mainan/Mainananak';
import Pakaian from '../components/pakaian/Pakaian';
import Sarana from '../components/sarana/Sarana';
import Jas from '../components/pakaian/Jas';
import Kebaya from '../components/pakaian/Kebaya';
import Baju from '../components/anak&mainan/Baju';
import Mainan from '../components/anak&mainan/Mainan';
import Mobil from '../components/kendaraan/Mobil';
import Motor from '../components/kendaraan/Motor';
import Sepeda from '../components/kendaraan/Sepeda';
import Gedung from '../components/sarana/Gedung';
import Search from '../screens/Search';
import Detail from '../screens/Detail';
import Login from '../auth/Login';
import Registrasi from '../auth/Registrasi';
import Forgot from '../auth/Forgot';
// import TabBottomScreen from '../navigation/TabBottomScreen';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import EditProfil from '../screens/EditProfil';
import Tentang from '../components/sewabarang/Tentang';
import Privacy from '../components/sewabarang/Privacy';
import Faq from '../components/sewabarang/Faq';
import Checkout from '../cart/Checkout';
import conf from '../assets/fonts/selection.json';

const Icon = createIconSetFromIcoMoon(conf);

const HomeStack = createStackNavigator({

    Home: {
      screen: Home,
      navigationOptions: {header: null}
    },
    Vendor: {
      screen: Vendor,
      navigationOptions: {tabBarVisible: false}
    },
    Notifikasi: {
      screen: Notifikasi,
      navigationOptions: {tabBarVisible: false, header: null}
    },
    Kendaraan: {
      screen: Kendaraan,
      navigationOptions: {tabBarVisible: false}
    },
    Pakaian: {
      screen: Pakaian,
      navigationOptions: {tabBarVisible: false}
    },
    Mainananak: {
      screen: Mainananak,
      navigationOptions: {tabBarVisible: false}
    },
    Baju: {
      screen: Baju,
      navigationOptions: {tabBarVisible: false}
    },
    Mainan: {
      screen: Mainan,
      navigationOptions: {tabBarVisible: false}
    },
    Sarana: {
      screen: Sarana,
      navigationOptions: {tabBarVisible: false}
    },
    Detail: {
      screen: Detail,
      navigationOptions: {tabBarVisible: false}
    },
    Jas: {
      screen: Jas,
      navigationOptions: {tabBarVisible: false}
    },
    Kebaya: {
      screen: Kebaya,
      navigationOptions: {tabBarVisible: false}
    },
    Mobil: {
      screen: Mobil,
      navigationOptions: {tabBarVisible: false}
    },
    Motor: {
      screen: Motor,
      navigationOptions: {tabBarVisible: false}
    },
    Sepeda: {
      screen: Sepeda,
      navigationOptions: {tabBarVisible: false}
    },
    Gedung: {
      screen: Gedung,
      navigationOptions: {tabBarVisible: false}
    },
    Search: {
       screen: Search,
       navigationOptions: {tabBarVisible: false}
     },
    Checkout: {
      screen: Checkout,
      navigationOptions: {tabBarVisible: false}
    },
  });

const TokoStack = createStackNavigator({
  Toko: {
    screen: Toko,
    navigationOptions: {header: null}
  }
})

const CartStack = createStackNavigator({
  Cart: {
    screen: Cart,
    navigationOptions: {header: null}
  }
})

const ProfileStack = createStackNavigator({
    Profile:{
      screen: Profile,
      navigationOptions: {header: null}
    },
    EditProfil: {
      screen: EditProfil,
      navigationOptions: {tabBarVisible: false}
    },
    Tentang: {
      screen: Tentang,
      navigationOptions: {tabBarVisible: false}
    },
    Privacy: {
      screen: Privacy,
      navigationOptions: {tabBarVisible: false}
    },
    Faq: {
      screen: Faq,
      navigationOptions: {tabBarVisible: false}
    },
});


const AuthStack = createStackNavigator({
Login: {
      screen: Login,
      navigationOptions: {tabBarVisible: false}
  },
Registrasi: {
    screen: Registrasi,
    navigationOptions: {tabBarVisible: false}
  },
Forgot: {
    screen: Forgot,
    navigationOptions: {tabBarVisible: false}
   },
});

const BottomTab = createBottomTabNavigator({
  Home: HomeStack,
  Toko: TokoStack,
  Cart: CartStack,
  Profile: ProfileStack,
},
{
  defaultNavigationOptions: ({navigation}) => ({
    tabBaricon: ({focused, tintColor}) => {
      const {routeName} = navigationOptions.state;
      let iconName;
      if (routeName == 'Home'){
        iconName = 'Home';
      }else if (routeName == 'Toko'){
        iconName = 'Toko';
      }else if (routeName == 'Cart'){
        iconName = 'Cart';
      }else if (routeName == 'Akun'){
        iconName = 'Akun'
      }
      return <Icon name={iconName} size={routeName == 'Akun'? 35 : 25} />
    },
  }),
  tabBarOptions: {
    activeTintColor: color={'rgba(31, 58, 147, 1)'},
    inactiveTintColor: color={'rgba(232, 232, 232, 1)'}
  }
})

const AppNavigator = createAppContainer ( createSwitchNavigator (
  {
    AuthLoading: AuthLoadingScreen,
    BottomTab,
    Auth: AuthStack,
    Home,
    Profile,
    Toko,
    Cart
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

export default AppNavigator;