/**
 * 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,
  ImageBackground
} from 'react-native';
import MyTabBar from './MyTabBar';
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 Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons'
import { createStackNavigator, HeaderBackButton, CardStyleInterpolators } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import I18n from './src/services/i18n';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Main from './src/page/main/main'
import Coupon from './src/page/coupon/coupon'
import CouponDetails from './src/page/coupon/couponDetails'
import Menu from './src/page/menu/menu'
import Setting from './src/page/setting/setting'
import Signin from './src/page/signin/signin'
import Signup from './src/page/signup/signup'
import SignUpVerify from './src/page/signup/signUpVerify'
import SplashScreen from './src/page/splash/splashScreen'
import About from './src/page/setting/about'
import PrivacyPolicy from './src/page/setting/privacyPolicy'
import LoyaltyProgramTerms from './src/page/setting/loyaltyProgramTerms'
import StoreInfo from './src/page/setting/storeInfo'
import NewsDetails from './src/page/news/newsDetails'
import NewsList from './src/page/news/newsList'
import Profile from './src/page/profile/profile'
import Testui from './src/page/camTest/testui'

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;
    I18n.locale = 'zh_hk'
  }

  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="Coupon"
          component={Coupon}
          options={{ tabBarLabel: 'coupon', headerShown: false }}
        />
        <Stack.Screen
          name="Menu"
          component={Menu}
          options={{ tabBarLabel: 'menu', 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="Signin"
              component={Signin}
              options={{ headerShown: false }}
            />

            <Stack.Screen
              name="Signup"
              component={Signup}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="SignUpVerify"
              component={SignUpVerify}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="About"
              component={About}
              options={{ headerShown: false }}
            />

            <Stack.Screen
              name="PrivacyPolicy"
              component={PrivacyPolicy}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="LoyaltyProgramTerms"
              component={LoyaltyProgramTerms}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="StoreInfo"
              component={StoreInfo}
              options={{ headerShown: false }}
            />
              <Stack.Screen
              name="NewsDetails"
              component={NewsDetails}
              options={{ headerShown: false }}
            />
            <Stack.Screen
            name="NewsList"
            component={NewsList}
            options={{ headerShown: false }}
          />
           <Stack.Screen
            name="Profile"
            component={Profile}
            options={{ headerShown: false }}
          />
            <Stack.Screen
            name="CouponDetails"
            component={CouponDetails}
            options={{ headerShown: false }}
          />
            <Stack.Screen
            name="Testui"
            component={Testui}
            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;