import * as React from 'react';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
import ActionType from '../redux/globalActionType';
import MenuSelection from './MenuSelection';
import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import Home from './Home';
import Login from './Login';
import Register from './Register';
import ResetPassword from './ResetPassword';
import VerifyEmail from './VerifyEmail';
import NewPassword from './NewPassword';
import ChangeEmail from './ChangeEmail';
import CardActivation from './CardActivation';
import ConfirmMobile from './ConfirmMobile';
import Balance from './Balance';
import RedeemCode from './RedeemCode';
import TransactionHistory from './TransactionHistory'
import TransactionDetail from './TransactionDetail'
import EmailConfirmation from './EmailConfirmation';
import Renewal from './Renewal';
import NewsDetail from './NewsDetail';
import DeliveryAddress from './DeliveryAddrees';
import PickupName from './PickupName';
import MenuConfirmation from './MenuConfirmation';
import AddressDetail from './AddreesDetail';
import ShoppingCart from './ShoppingCart';
import TransferBalance from './TransferBalance';
import CardInfo from './CardInfo';
import ChangeLanguage from './ChangeLanguage';
import ChangePassword from './ChangePassword';
import DateTime from './Date';
import NewRegister from './New_Register';
import ProfilePage from './ProfilePage';
import ChangeProfile from './ChangeProfil';
import i18n from 'i18n-js';
import TopUpInfo from './TopUpInfo';
import UpgradePremium from './UpgradePremium';
import Account from './Account';
import Cameras from './Camera';
import OutletDetail from './OutletDetails';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { enableScreens } from 'react-native-screens';
import MenuDetail from './MenuDetail';
import OrderHistory from './OrderHistory';
import OrderDetail from './OrderDetail';
enableScreens();

function Rewards() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>
        Rewards !
      </Text>

    </View>
  )

}


function Outlets() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>
        Outlets !
      </Text>

    </View>
  )

}

const Tab = createBottomTabNavigator();

function HomePage({navigation}) {
  return (
    <Tab.Navigator
    
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'HOME') {
            iconName = focused ? 'ios-home' : 'ios-home'
          } else if (route.name === 'MENU') {
            iconName = focused ? 'ios-paper' : 'ios-paper';
          } else if (route.name === 'REWARDS') {
            iconName = focused ? 'ios-gift' : 'ios-gift';
          } else if (route.name === 'ORDER') {
            iconName = focused ? 'md-cart' : 'md-cart';
          } else if (route.name === 'OUTLETS') {
            iconName = focused ? 'ios-cafe' : 'ios-cafe';
          } else if (route.name === 'ACCOUNT') {
            iconName = focused ? 'account' : 'account';
            return <MaterialCommunityIcons name={iconName} size={size} color={color} />
          }

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

      })}

      tabBarOptions={{ activeTintColor: 'cornflowerblue', inactiveTintColor: 'gray' }}

    >
      <Tab.Screen name="HOME" component={Home}  />
      <Tab.Screen name="MENU" component={MenuSelection} />
      <Tab.Screen name="REWARDS" component={Rewards} />
      <Tab.Screen name="ORDER" component={OrderHistory} />
      <Tab.Screen name="OUTLETS" component={Outlets} />
      <Tab.Screen name="ACCOUNT" component={Account} />
    </Tab.Navigator>


  );
}
const Stack = createStackNavigator();
class Auth extends React.Component {
  constructor(props) {
    super(props);
    i18n.locale = this.props.language;
  }

  render() {
    return (
      <Stack.Navigator>
        {
          this.props.session_id === '' ? (
            <>
              {/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
              <Stack.Screen name="Login" component={Login} />
              <Stack.Screen name="Home" component={Home} />
              <Stack.Screen name="Profile" component={ProfilePage} />
              <Stack.Screen name="Change Profil" component={ChangeProfile} />
              <Stack.Screen name="Register" component={Register} />
              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
            </>
          ) : this.props.pageEmailConfirmation === true ? (
            <>
              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
              <Stack.Screen name="Login" component={Login} />
              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
            </>
          ) : (
                <>
                  <Stack.Screen name="Home" component={HomePage} options={{headerShown:false}}/>
                  <Stack.Screen name="Profile" component={ProfilePage} />
                  <Stack.Screen name="Change Profil" component={ChangeProfile} />
                  <Stack.Screen name="Change language" component={ChangeLanguage} />
                  <Stack.Screen name="Change password" component={ChangePassword} />
                  <Stack.Screen name="Card Activation" component={CardActivation} />
                  <Stack.Screen name="Renewal" component={Renewal} />
                  <Stack.Screen name="Account" component={Account} />
                  <Stack.Screen name="Login" component={Login} />
                  <Stack.Screen name="Transfer Balance" component={TransferBalance} />
                  <Stack.Screen name="Register" component={Register} />
                  <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
                  <Stack.Screen name="Upgrade Premium" component={UpgradePremium} />
                  <Stack.Screen name="Camera" component={Cameras} />
                  <Stack.Screen name="Delivery Address" component={DeliveryAddress}/>
                  <Stack.Screen name="Address Detail" component={AddressDetail} />
                  <Stack.Screen name="Menu Detail" component={MenuDetail} />
                  <Stack.Screen name="Pickup Name" component={PickupName} options={{title:"PICKUP STORE",headerStyle:{backgroundColor:"#ccb46c"},headerTitleAlign:'center',headerTitleStyle:{color:'white',fontWeight:'bold'}}} />
                  <Stack.Screen name="Outlet Detail" component={OutletDetail}/>
                  <Stack.Screen name="Menu Select" component={MenuSelection} options={{headerShown:false}} />
                  <Stack.Screen name="Card Info" component={CardInfo} />
                  <Stack.Screen name="Shopping Cart" component={ShoppingCart} />
                  <Stack.Screen name="Order History" component={OrderHistory} />
                  <Stack.Screen name="Order Detail" component={OrderDetail} options={({ navigation, route }) => ({ headerLeft: props => <HeaderBackButton  {...props} onPress={()=>navigation.navigate('Home',{screen:'ORDER'})}/>,
        })}/>
                  
                </>
              )


        }

        <Stack.Screen name="New Password" component={NewPassword} />
        {/* <Stack.Screen name="Login" component={Login} /> */}
        <Stack.Screen name="Reset Password" component={ResetPassword} />
        <Stack.Screen name="Verify Email" component={VerifyEmail} />
        <Stack.Screen name="Change Email" component={ChangeEmail} />
        {/* <Stack.Screen name="Card Activation" component={CardActivation} /> */}
        <Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
        <Stack.Screen name="Balance" component={Balance} />
        <Stack.Screen name="Redeem Code" component={RedeemCode} />
        <Stack.Screen name="Transaction History" component={TransactionHistory} />
        <Stack.Screen name="Transaction Detail" component={TransactionDetail} />
        {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}

        <Stack.Screen name="News Detail" component={NewsDetail} />
        {/* <Stack.Screen name="Delivery Address" component={DeliveryAddress} /> */}
        
        <Stack.Screen name="Confirm Your Order" component={MenuConfirmation} />
        
       

        {/* <Stack.Screen name="Card Info" component={CardInfo} /> */}
        {/* <Stack.Screen name="Change password" component={ChangePassword} /> */}
        <Stack.Screen name="Date Time" component={DateTime} />
        <Stack.Screen name="New Register" component={NewRegister} />
        <Stack.Screen name="TopUpInfo" component={TopUpInfo} />
      </Stack.Navigator>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    session_id: state.session_id,
    language: state.language,
    pageEmailConfirmation: state.pageEmailConfirmation
  }
}

export default connect(mapStateToProps)(Auth);




