import React from "react";
import { StyleSheet, Image, Text, View } from "react-native";

import {
  TabNavigator,
  StackNavigator,
  DrawerNavigator,
  TabBarBottom
} from "react-navigation";
import Size from "../config/size";
import Icon from "react-native-vector-icons/dist/Ionicons";
import init from "../containers/Menu/init";
import Tutorial from "../containers/Tutorial/tutorial"
import menu from "../containers/Menu/menu";
import language from "../containers/Settings/language"
import account from "../containers/Account/account";
import settings from "../containers/Settings/settings";
import myCoupons from "../containers/Settings/myCoupons"
import SettingInside from "../containers/Settings/settingInside"
import NotificationSetting from "../containers/Settings/notificationSetting";
import myOrders from "../containers/MyOrders/myOrders";
import OrderDetails from "../containers/MyOrders/orderDetails";
import Locations from "../containers/Location/location";
import LocationRequest from "../containers/Location//locationRequest";
import ConfirmOrder from "../containers/MyOrders/confirmOrder";
import Login from "../containers/Login/login";
import AddCard from "../containers/Account/addCard";
import SideMenu from "./sideMenu";
import pay from "../containers/Pay/pay";
import SignUpInformation from "../containers/signUp/signUpInformation";
import SignUpVerify from "../containers/signUp/signUpVerify";
import ForgetPassword from '../containers/signUp/forgetPassword'
import { Provider } from "mobx-react";
import FastImage from "react-native-fast-image";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import store from "../stores/stores_index";
import theme from "../config/colors"
import Global from '../Global'
import {Fonts} from '../config/fonts'

const size = new Size();

const Navigation = () => {
  return (
    <Provider {...store}>
      <Navigator />
    </Provider>
  );
};

const settingStack = StackNavigator({
  settings:{
    screen: settings,
    navigationOptions: {
      header: null,
    }
  },
  myCoupons:{
    screen: myCoupons,
    navigationOptions: {
      header: null,
    }
  },
  SettingInside:{
    screen: SettingInside,
    navigationOptions: {
      header: null,
    }
  },
  language:{
    screen: language,
    navigationOptions: {
      header: null,
    }
  },
})


const loginStack = StackNavigator({
    Login:{
    screen: Login,
    navigationOptions: {
      header: null,
    }
  },
    SignUpInformation:{
      screen:SignUpInformation,
      navigationOptions: {
        header: null,
      }
    },
    SignUpVerify:{
      screen:SignUpVerify,
      navigationOptions:{
        header: null,
      }
    },
  })



const TabRoutes = TabNavigator(
  {
    menu: {
      screen: menu,
      navigationOptions: {
        header: null,
        headerTitle: "Menu",
      },
    },

    myOrders: {
      screen: myOrders,
      navigationOptions: {
        header: null,
        headerTitle: "My Orders"
      }
    },

    account: {
      screen: account,
      navigationOptions: {
        header: null,
        headerTitle: "Account"
      }
    },

    settingStack: {
      screen: settingStack,
      navigationOptions: {
        header: null,
        headerTitle: "Settings"
      }
    }
  },

  
  {
    initialRouteName: "menu",
    
    navigationOptions: ({ navigation }) => {
      
      const { routeName, routes } = navigation.state;
      let params = routes && routes[1] && routes[1].params;
      return {
        gesturesEnabled: false,
          
        tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          switch (routeName) {
            case "menu":
              iconName =  require("../images/menubarmenu.png");
              break;
            case "myOrders":
              iconName =  require("../images/menubarmyorder.png");
              break;
            case "account":
              iconName =  require("../images/menubarprofile.png");
              break;
            case "settingStack":
              iconName = require("../images/menubarsetting.png");
              break;
            default:
              break;
          }
          // You can return any component that you like here! For demo we use an
          // icon component from react-native-vector-icons

          return<FastImage
          source={iconName}
          style={{tintColor:tintColor}}
        />
          //return <Icon name={iconName} size={24} color={tintColor} />;
        }
      };
  
    },


    tabBarOptions: {
      showIcon: true,
      showLabel:true,
      activeTintColor: theme.mainColor,
      inactiveTintColor: "#858585",
      style: {
        height: 60,
        justifyContent: 'center',
        paddingVertical: 5,
        backgroundColor: "white"
      },
      tabStyle:{
       alignSelf: 'center',
       backgroundColor: 'white'
      },
      iconStyle:{
        height:60,
       
      },
      labelStyle: {
        fontSize: 12,
        lineHeight: 20,
        fontFamily:Fonts.century
      }
    },       
    tabBarComponent: ({ jumpToIndex, ...props, navigation }) => (
      <TabBarBottom
       {...props}
              jumpToIndex = { tabIndex => {
              const currentIndex = navigation.state.index;
 
               if (tabIndex == 1) {
               // do some thing. Call Native Live Stream Record
              
               if(!Global.login){
              
               navigation.navigate('Login')
               }else{
                navigation.navigate('myOrders')
            
               }
               } else if (tabIndex == 2){
               // navigation.navigate('account')
               if(!Global.login){
            
                navigation.navigate('Login')
                }else{
                 navigation.navigate('account')

                }
               } else {
                 jumpToIndex(tabIndex);
              }
              console.log('Select tab: ', tabIndex);
          }}
         />),
    
    tabBarPosition: "bottom",
    animationEnabled: true,
    swipeEnabled: false,
  },
  
);



// add your router below
const Navigator = StackNavigator({
  init: {
    screen: init,
    navigationOptions: {
      header: null,
    }
  },
  TabRoutes: {
    screen: TabRoutes,
    navigationOptions: {
      header: null
    }
  },

  Login:{
    screen: Login,
    navigationOptions: {
      header: null
    }
  },

   

  OrderDetails: {
    screen: OrderDetails,
    navigationOptions: {
      header: null
    }
  },

  NotificationSetting: {
    screen: Login,
    navigationOptions: {
      header: null
    }
  },

  Location: {
    screen: Locations,
    navigationOptions: {
      header: null
    }
  },

  LocationRequest: {
    screen: LocationRequest,
    navigationOptions: {
      header: null
    }
  },

  ConfirmOrder: {
    screen: ConfirmOrder,
    navigationOptions: {
      header: null,
      gesturesEnabled: false
    }
  },

  SignUpInformation: {
    screen: SignUpInformation,
    navigationOptions: {
      header: null
    }
  },

  pay: {
    screen: pay,
    navigationOptions: {
      header: null
    }
  },

  SignUpVerify: {
    screen: SignUpVerify,
    navigationOptions: {
      header: null
    },
  },
  ForgetPassword: {
    screen: ForgetPassword,
    navigationOptions: {
      header: null
    },
  },
  AddCard: {
    screen: AddCard,
    navigationOptions: {
      header: null
    }
  },
  Tutorial:{
    screen: Tutorial,
    navigationOptions: {
      header: null
    }
  }
});

export default Navigation;