import React from 'react';
import { Button, Text, View,Image } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import ListProducts from './ListProducts/index';
import HomeScreen from './CategoryScreen/index'
import HistoryScreen from './HistoryBuyProduct/index'
import CartScreen from './CartScreen/index';
import OrderCheckout from './OrderandCheckoutScreen/index';
import ViewProductDetailScreen from './ViewProductDetail/index';
import LoginScreen from './LoginScreen/index';
import RegisterScreen from './RegisterScreen/index';
import SplashScreen from './SplashScreen/index';

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  ListProductfromCategory: { screen: ListProducts },
  ViewProductDetail: { screen: ViewProductDetailScreen}
});

const HistoryStack = createStackNavigator({
  History: {screen: HistoryScreen},
});

const CartStack = createStackNavigator({
  Cart: {screen: CartScreen},
  OrderandCheckout: {screen: OrderCheckout}
});

const ProfileStack = createStackNavigator({
  Settings: {screen: ListProducts},
});

const RootStack = createStackNavigator({
    Splash: { screen: SplashScreen,
      navigationOptions: () => ({
        header: null
    })},
    Login: { screen: LoginScreen,
      navigationOptions: () => ({
        header: null
    })},
    Register: { screen: RegisterScreen,
      navigationOptions: () => ({
        header: null
      })},  
});


export default createAppContainer(RootStack,createBottomTabNavigator(
  {
    Home1: { screen: HomeStack,
    navigationOptions: {
      tabBarLabel: 'Danh Mục',
      tabBarIcon:(
        <Image
        source={require('../assets/img/icons/icons_list.png')}
        style={{ width: 40, height: 40, marginRight: 10, opacity: 10, justifyContent: 'center', alignItems: 'center'}}/>
      )
    }},
    Histories: { screen: HistoryStack ,
      navigationOptions: {
        tabBarLabel: 'Lịch Sử Mua Hàng',
        tabBarIcon:(
          <Image
          source={require('../assets/img/icons/icons_ls.png')}
          style={{ width: 40, height: 40, marginRight: 10, opacity: 10, justifyContent: 'center', alignItems: 'center'}}/>
        )
      }},
    Carts : { screen: CartStack ,
      navigationOptions: {
        tabBarLabel: 'Giỏ Hàng',
        tabBarIcon:(
          <Image
          source={require('../assets/img/icons/icons_cart.png')}
          style={{ width: 40, height: 40, marginRight: 10, opacity: 10, justifyContent: 'center', alignItems: 'center'}}/>
        )
      }},
    Profile : { screen: ProfileStack ,
      navigationOptions: {
        tabBarLabel: 'Tài Khoản',
        tabBarIcon:(
          <Image
          source={require('../assets/img/icons/icons_user.png')}
          style={{ width: 40, height: 40, marginRight: 10, opacity: 10, justifyContent: 'center', alignItems: 'center'}}/>
        )
      }},
  },
  {
    tabBarOptions: {
      activeTintColor: 'black',
      inactiveTintColor: 'gray',
      labelStyle: {
        fontSize: 14,
        marginLeft: -10,
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: "Lobster-Regular",
      },
      style: {
        backgroundColor: '#3ee2bf',
        height: 70,
      },
    },
  },
  
));