/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */


import React, { useEffect } from 'react';

import { colors } from './src/assets/styles/colors-theme';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
} from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { Provider, inject, observer } from 'mobx-react';
import Store from './src/stores/index';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton, CardStyleInterpolators } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import MyTabBar from './MyTabBar';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import SplashScreen from './src/pages/splash/splashScreen';
import Main from './src/pages/main/main';
import Category from './src/pages/category/category'
import Favourite from './src/pages/favorite/favorite'
import Cart from './src/pages/cart/cart'
import Setting from './src/pages/setting/setting'
import ProductsDetails from './src/pages/products/productsDetails'
import Login from './src/pages/login/login'
import ForgotPassword from './src/pages/login/forgotPassword'
import Signup from './src/pages/signup/signup'
import SignupSuccess from './src/pages/signup/signupSuccess'
import Profile from './src/pages/setting/profile'
import MyWallet from './src/pages/setting/myWallet'
import History from './src/pages/history/history'
import CategoryGrid from './src/pages/category/categoryGrid'
import Search from './src/pages/search/search'
import Test from './src/pages/main/test'
import Shipping from './src/pages/order/shipping'
import PaymentMethod from './src/pages/order/paymentMethod'
import ConfirmPayment from './src/pages/order/confirmPayment'
import OrderConfirmed from './src/pages/order/orderConfirmed'
import StripePayment from './src/pages/order/stripePayment'
import ShowQrcode from './src/pages/order/showQrcode'
import HistoryList from './src/pages/history/historyList'
import Redeem from './src/pages/redeem/redeem'
Icon.loadFont();

const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

const config = {
  animation: 'mass',
  config: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};


const Router = inject("appStore")(observer(class Router extends React.Component {

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  BottomTabScreen = () => {
    return (
      <BottomTab.Navigator
        screenOptions={{
          gestureEnabled: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
        tabBar={props => <MyTabBar {...props} />}>
        <Stack.Screen
          name="Main"
          component={Main}

          options={{
            tabBarLabel: 'Main', headerShown: false,
          }}
        />
        <Stack.Screen
          name="Category"
          component={Category}
          options={{ tabBarLabel: 'Category', headerShown: false }}
        />
        {/* <Stack.Screen
          name="Favourite"
          component={Favourite}
          options={{ tabBarLabel: 'Favourite', headerShown: false }}
        /> */}

        <Stack.Screen
          name="Cart"
          component={Cart}
          options={{ tabBarLabel: 'Cart', headerShown: false }}
        />
        <Stack.Screen
          name="Setting"
          component={Setting}
          options={{ tabBarLabel: 'Setting', headerShown: false }}
        />
      </BottomTab.Navigator>
    );
  };

  render() {
    return (
      <View style={{ flex: 1, }}>

        <Stack.Navigator initialRouteName="splash"
        >
          {!this.store.splash ? (
            <>
              <Stack.Screen
                name="SplashScreen"
                component={SplashScreen}
                options={{ headerShown: false }}
              />

            </>
          ) : (<>
            <Stack.Screen
              name="BottomTabScreen"
              component={this.BottomTabScreen}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ProductsDetails"
              component={ProductsDetails}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Login"
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ForgotPassword"
              component={ForgotPassword}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Signup"
              component={Signup}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="SignupSuccess"
              component={SignupSuccess}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Profile"
              component={Profile}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="MyWallet"
              component={MyWallet}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="History"
              component={History}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="CategoryGrid"
              component={CategoryGrid}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Search"
              component={Search}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Test"
              component={Test}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Shipping"
              component={Shipping}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="PaymentMethod"
              component={PaymentMethod}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ConfirmPayment"
              component={ConfirmPayment}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="OrderConfirmed"
              component={OrderConfirmed}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="StripePayment"
              component={StripePayment}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="ShowQrcode"
              component={ShowQrcode}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="HistoryList"
              component={HistoryList}
              options={{ headerShown: false }}
            />
              <Stack.Screen
              name="Redeem"
              component={Redeem}
              options={{ headerShown: false }}
            />
          </>)}
        </Stack.Navigator>

      </View>
    );
  }
}))

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default Router;