import * as React from 'react';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { View, Text, Image, Alert, TouchableOpacity, Platform } from 'react-native';
import ActionType from '../redux/globalActionType';
import MenuSelection from './MenuSelection';
import { FontAwesome } from '@expo/vector-icons';
import Home from './Home';
import { SimpleLineIcons } from '@expo/vector-icons';
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 EditAddressDetail from './EditAddressDetail';
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';
import RewardsList from './RewardsList';
import RewardDetail from './RewardDetail';
import RewardSelect from './RewardSelect';
import Outlets from './Outlets';
import RewardHistory from './RewardHistory';
import WelcomeReg from './WelcomeReg';
import WelcomeLog from './WelcomeLog';
import RatingOrder from './RatingOrder';
import UseBalance from './UseBalance';
import PaymentCode from './PaymentCode';
import UpdateVersion from './UpdateVersion';
import SettingUrl from './setBaseUrl';
import InboxList from './InboxList';
import InboxDetail from './InboxDetail';
import PrivacyStatement from './PrivacyStatement';
import badgeInbox from './Home';
import { useNavigation } from '@react-navigation/native';
import { useSafeArea } from 'react-native-safe-area-context';

enableScreens();

const Tab = createBottomTabNavigator();

const BottomNavigation = ({ state, descriptors, navigation }) => {
  try {
    const insets = useSafeArea();
    let paddingBottom = 0;
    if (Platform.OS === 'ios') {
      paddingBottom = insets.bottom;
    }
    return (
      <View style={{ flexDirection: 'row', paddingBottom: paddingBottom }}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
                ? options.title
                : route.name;

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          let icon = require('../assets/icon/icon-home.png')
          if (label === 'HOME') {
            icon = require('../assets/icon/icon-home.png')
          } else if (label === 'MENU') {
            icon = require('../assets/icon/icon-menu.png')
          } else if (label === 'REWARDS') {
            icon = require('../assets/icon/icon-rewards.png')
          } else if (label === 'ORDER') {
            icon = require('../assets/icon/icon-order.png')
          } else if (label === 'OUTLETS') {
            icon = require('../assets/icon/icon-outlets.png')
          } else if (label === 'ACCOUNT') {
            icon = require('../assets/icon/icon-account.png')
          }

          return (
            <TouchableOpacity
              key={route.name}
              accessibilityRole="button"
              accessibilityStates={isFocused ? ['selected'] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#f0f0f0' }}
            >
              <Image source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray' }} />
            </TouchableOpacity>
          );
        })}
      </View>
    )
  } catch (error) {
    Alert.alert('Error  ' + error)
  }

}

function HandleInbox({ navigation }) {
  return (
    <View>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('Inbox List')}>
        <SimpleLineIcons name="bell" size={24} color="white" />
      </TouchableOpacity>
    </View>
  )
}

function HomePage({ navigation }) {
  try {
    return (
      <Tab.Navigator tabBar={props => <BottomNavigation {...props} />}
      >
        <Tab.Screen name="HOME" component={Home} />
        <Tab.Screen name="MENU" component={MenuSelection} />
        <Tab.Screen name="REWARDS" component={RewardsList} />
        <Tab.Screen name="ORDER" component={OrderHistory} />
        <Tab.Screen name="OUTLETS" component={Outlets} />
        <Tab.Screen name="ACCOUNT" component={Account} />
      </Tab.Navigator>
    );
  } catch (error) {
    Alert.alert('Error : ' + error)
  }

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

  componentDidMount() {
    console.log("INI" + this.props.pageEmailConfirmation)
  }


  render() {
    return (
      <Stack.Navigator>
        {

          this.props.session_id === '' ? (
            <>
              <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
              <Stack.Screen name="Setting" component={SettingUrl} options={{
                headerStyle: { backgroundColor: "#CFB368" },
                headerBackTitleStyle: { color: 'white' },
                headerTintColor: '#fff',
                headerTitleAlign: 'center',
                headerTitleStyle: {
                  fontFamily: 'Gotham-Black',
                  color: 'white',
                  fontSize: 20,
                },
                title: 'SETTING URL'
              }} />
              {/* <Stack.Screen name="Home" component={Home} /> */}
              <Stack.Screen name="Home" component={HomePage}
                options={{
                  headerShown: false,
                  headerRight: props => <HandleInbox {...props} />,
                  title: 'TODAY PROMOTION',
                  headerStyle: { backgroundColor: '#CFB368' },
                  headerTitleContainerStyle: { alignContent: 'center' },
                  headerTitleStyle: {
                    alignSelf: 'center',
                    fontFamily: 'Gotham-Black',
                    color: 'white',
                    textAlign: 'center'
                  }
                }} />
              <Stack.Screen name="Profile" component={ProfilePage} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('profile').toUpperCase()
              }} />
              <Stack.Screen name="UpdateVersion" component={UpdateVersion}
                options={{ headerShown: false }}
              />
              <Stack.Screen name="Change Profil" component={ChangeProfile} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  color: 'white',
                  textAlign: 'center'
                }, title: 'CHANGE PROFILE'
              }} />
              <Stack.Screen name="Register" component={Register} />
              {/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('headerEmailConfirm')
              }} />
              <Stack.Screen name="Welcomes" component={WelcomeReg} options={{
                headerShown: false,
              }} />
              <Stack.Screen name="Privacy Statement" component={PrivacyStatement} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  fontSize: 20,
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('headerPrivacyPolicy')
              }} />

            </>
          ) : this.props.pageEmailConfirmation == true ? (
            <>
              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('headerEmailConfirm')
              }} />
              <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
              <Stack.Screen name="LoginWelcome" component={WelcomeLog} options={{
                headerShown: false,
              }} />
              {/* <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} /> */}
              <Stack.Screen name="Home" component={HomePage}
                options={{
                  headerShown: true,
                  headerRight: props => <HandleInbox {...props} />,
                  title: 'TODAY PROMOTION',
                  headerStyle: { backgroundColor: '#CFB368' },
                  headerTitleContainerStyle: { alignContent: 'center' },
                  headerTitleStyle: {
                    alignSelf: 'center',
                    fontFamily: 'Gotham-Black',
                    color: 'white',
                    textAlign: 'center'
                  }
                }} />
              <Stack.Screen name="Card Activation" component={CardActivation} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  fontSize: 20,
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('Acitvatecard')
              }} />
              <Stack.Screen name="UpdateVersion" component={UpdateVersion}
                options={{ headerShown: false }}
              />
              <Stack.Screen name="Privacy Statement" component={PrivacyStatement} options={{
                headerStyle: { backgroundColor: '#CFB368' },
                headerTitleContainerStyle: { alignContent: 'center' },
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerTitleStyle: {
                  alignSelf: 'center',
                  fontFamily: 'Gotham-Black',
                  fontSize: 20,
                  color: 'white',
                  textAlign: 'center'
                }, title: i18n.t('headerPrivacyPolicy')
              }} />
            </>
          ) : (
                <>
                  <Stack.Screen name="LoginWelcome" component={WelcomeLog} options={{
                    headerShown: false,
                  }} />
                  <Stack.Screen name="Home" component={HomePage}
                    options={{
                      headerShown: false,
                      title: 'TODAY PROMOTION',
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        color: 'white',
                        textAlign: 'center'
                      }
                    }} />
                  <Stack.Screen name="Profile" component={ProfilePage}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('profile').toUpperCase()
                    }} />
                  <Stack.Screen name="Change Profil" component={ChangeProfile} />
                  <Stack.Screen name="Change language" component={ChangeLanguage}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('language')
                    }}
                  />
                  <Stack.Screen name="Change password" component={ChangePassword} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('changepassword')
                  }} />
                  <Stack.Screen name="Card Activation" component={CardActivation} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('Acitvatecard')
                  }} />
                  <Stack.Screen name="Renewal" component={Renewal} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      color: 'white',
                      textAlign: 'center'
                    }, title: 'RENEWAL'
                  }} />
                  <Stack.Screen name="Account" component={Account} />
                  <Stack.Screen name="Setting" component={SettingUrl} options={{
                    headerStyle: { backgroundColor: "#CFB368" },
                    headerBackTitleStyle: { color: 'white' },
                    headerTintColor: '#fff',
                    headerTitleAlign: 'center',
                    headerTitleStyle: {
                      fontFamily: 'Gotham-Black',
                      color: 'white',
                      fontSize: 20,
                    },
                    title: 'SETTING URL'
                  }} />
                  <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                  <Stack.Screen name="Privacy Statement" component={PrivacyStatement} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('headerPrivacyPolicy')
                  }} />
                  <Stack.Screen name="Transfer Balance" component={TransferBalance} options={{
                    headerStyle: { backgroundColor: "#CFB368" },
                    headerBackTitleStyle: { color: 'white' },
                    headerTintColor: '#fff',
                    headerTitleAlign: 'center',
                    headerTitleStyle: {
                      fontFamily: 'Gotham-Black',
                      color: 'white',
                      fontSize: 20,
                    },
                    title: 'TRANSFER BALANCE'
                  }} />
                  <Stack.Screen name="Register" component={Register} />
                  <Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('headerEmailConfirm')
                  }} />
                  <Stack.Screen name="Upgrade Premium" component={UpgradePremium}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('upgradePremium')
                    }} />
                  <Stack.Screen name="Camera" component={Cameras} />
                  <Stack.Screen name="Delivery Address" component={DeliveryAddress} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('headerDeliveryAddress')
                  }} />
                  <Stack.Screen name="Address Detail" component={AddressDetail} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: 'TAMBAH ALAMAT'
                  }} />
                  <Stack.Screen name="Edit Address" component={EditAddressDetail} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: 'EDIT ALAMAT'
                  }} />
                  <Stack.Screen name="Menu Detail" component={MenuDetail}
                    options={({ route }) => ({
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: route.params.nameMenu
                    })}
                  />
                  <Stack.Screen name="Pickup Name" component={PickupName} options={{
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    }, title: i18n.t('headerPickupStore')
                  }} />
                  <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}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('headerShoppingCart')
                    }} />
                  <Stack.Screen name="Order History" component={OrderHistory} />
                  <Stack.Screen name="Reward History" component={RewardHistory}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('headerRewardHistory')
                    }}
                  />

                  <Stack.Screen name="Order Detail" component={OrderDetail} options={({ navigation, route }) => ({
                    headerStyle: { backgroundColor: '#CFB368' },
                    headerTitleContainerStyle: { alignContent: 'center' },
                    headerTitleAlign: 'center',
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                      alignSelf: 'center',
                      fontFamily: 'Gotham-Black',
                      fontSize: 20,
                      color: 'white',
                      textAlign: 'center'
                    },
                    title: i18n.t('headerOrderDetail'),
                    headerLeft: props => <HeaderBackButton  {...props} onPress={() => navigation.navigate('Home', { screen: 'ORDER' })} />,

                  })} />

                  <Stack.Screen name="RatingOrder" component={RatingOrder}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: 'RATING ORDER'
                    }}
                  />

                  <Stack.Screen name="UpdateVersion" component={UpdateVersion}
                    options={{ headerShown: false }}
                  />
                  <Stack.Screen name="UseBalance" component={UseBalance}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: i18n.t('usebalance')
                    }}
                  />
                  <Stack.Screen name="PaymentCode" component={PaymentCode}
                    options={{
                      headerStyle: { backgroundColor: '#CFB368' },
                      headerTitleContainerStyle: { alignContent: 'center' },
                      headerTitleAlign: 'center',
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        alignSelf: 'center',
                        fontFamily: 'Gotham-Black',
                        fontSize: 20,
                        color: 'white',
                        textAlign: 'center'
                      }, title: 'PAYMENT CODE',

                    }}
                  />

                </>
              )


        }

        <Stack.Screen name="New Password" component={NewPassword} options={{
          headerStyle: { backgroundColor: "#ccb46c" },
          headerBackTitleStyle: { color: 'white' },
          headerTitleAlign: 'center',
          headerTintColor: '#fff',
          headerTitleStyle: {
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Gotham-Black',
            color: 'white'
          },
          headerTitle: i18n.t('headerNewPassword')

        }} />
        {/* <Stack.Screen name="Login" component={Login} /> */}
        <Stack.Screen name="Reset Password" component={ResetPassword}
          options={{
            headerStyle: { backgroundColor: "#ccb46c" },
            headerBackTitleStyle: { color: 'white' },
            headerTitleAlign: 'center',
            headerTintColor: '#fff',
            headerTitleStyle: {
              textAlign: 'center',
              fontSize: 20,
              fontFamily: 'Gotham-Black',
              color: 'white'
            },
            headerTitle: i18n.t('headerResetPassword')

          }} />

        <Stack.Screen name="Verify Email" component={VerifyEmail} />
        <Stack.Screen name="Change Email" component={ChangeEmail} options={{
          headerStyle: { backgroundColor: "#ccb46c" },
          headerBackTitleStyle: { color: 'white' },
          headerTitleAlign: 'center',
          headerTintColor: '#fff',
          headerTitleStyle: {
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Gotham-Black',
            color: 'white'
          },
          headerTitle: i18n.t('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}
          options={({ navigation }) => ({
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('headerRedeemCode'),
            headerLeft: props => <HeaderBackButton  {...props} onPress={() => navigation.navigate('Home', { screen: 'HOME' })} />,
          })} />

        <Stack.Screen name="Inbox List" component={InboxList}
          options={({ navigation }) => ({
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('headerInboxList'),
            headerLeft: props => <HeaderBackButton  {...props} onPress={() => navigation.navigate('Home', { screen: 'HOME' })} />
          })} />

        <Stack.Screen name="Inbox Detail" component={InboxDetail} options={{ headerShown: false }} />

        <Stack.Screen name="Transaction History" component={TransactionHistory}
          options={{
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('headerTransHistory')
          }} />
        <Stack.Screen name="Transaction Detail" component={TransactionDetail}
          options={{
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: 'TRANSACTION DETAIL'
          }} />
        {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}

        <Stack.Screen name="News Detail" component={NewsDetail} options={{
          headerStyle: { backgroundColor: "#CFB368" },
          headerBackTitleStyle: { color: 'white' },
          headerTintColor: '#fff',
          headerTitleAlign: 'center',
          headerTitleStyle: {
            fontFamily: 'Gotham-Black',
            color: 'white',
            fontSize: 20,
          },
          title: 'NEWS DETAIL'
        }} />
        <Stack.Screen name="CONFIRM YOUR ORDER" component={MenuConfirmation}
          options={{
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('headerConfirmOrder')
          }} />
        <Stack.Screen name="Date Time" component={DateTime} />
        <Stack.Screen name="New Register" component={NewRegister}
          options={{
            headerStyle: { backgroundColor: "#ccb46c" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('register')
          }} />
        <Stack.Screen name="TopUpInfo" component={TopUpInfo} options={{
          headerStyle: { backgroundColor: "#CFB368" },
          headerBackTitleStyle: { color: 'white' },
          headerTintColor: '#fff',
          headerTitleAlign: 'center',
          headerTitleStyle: {
            fontFamily: 'Gotham-Black',
            color: 'white',
            fontSize: 20,
          },
          title: 'TOPUP INFO '
        }} />
        <Stack.Screen name="Reward Detail" component={RewardDetail}
          options={{
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: 'REWARD DETAIL'
          }} />
        <Stack.Screen name="Reward Select" component={RewardSelect}
          options={{
            headerStyle: { backgroundColor: "#CFB368" },
            headerBackTitleStyle: { color: 'white' },
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontFamily: 'Gotham-Black',
              color: 'white',
              fontSize: 20,
            },
            title: i18n.t('titlerewardhistory')
          }} />
      </Stack.Navigator>
    )
  }
}

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

export default connect(mapStateToProps)(Auth);




