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


import React, { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
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 } from 'mobx-react';
import Store from './src/stores/index';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } 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 Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import SplashScreen from './src/pages/splash/splashScreen';
import Main from './src/pages/main/main';
import Search from './src/pages/search/search';
import Favorite from './src/pages/favorite/favorite';
import MyTabBar from './MyTabBar';
import Order from './src/pages/order/order';
import Profile from './src/pages/profile/profile';
import Setting from './src/pages/profile/Setting';
import AddName from './src/pages/profile/addName';
import CreditCard from './src/pages/profile/creditCard';
import AddressSetting from './src/pages/profile/addressSetting';
import BuyHistory from './src/pages/buyHistory/buyHistory';
import HistoryDetails from './src/pages/buyHistory/historyDetails';
import ProductsDetails from './src/pages/productsDetails/productsDetails';
import ShoppingCart from './src/pages/shoppingCart/shoppingCart';
import Signin from './src/pages/signin/signin';
import Signup from './src/pages/signup/signup';
import News from './src/pages/news/news';
import SignUpVerify from './src/pages/signup/signUpVerify';
import ForgotPassword from './src/pages/signup/forgotPassword';
import GroupDetails from './src/pages/group/groupDetails';
import RedeemGifts from './src/pages/group/redeemGifts';
import ManageMembers from './src/pages/group/manageMembers';
import SalesRecord from './src/pages/group/salesRecord';
import GroupList from './src/pages/group/groupList';
import RedeemRecord from './src/pages/profile/redeemRecord'
import FullScreen from './src/pages/fullScreen/fullScreen'
import Notification from './src/pages/notificaation/notification'
import Tutorial from './src/pages/tutorial/tutorial'
Icon.loadFont();

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

import { inject, observer } from 'mobx-react';

@inject('appStore')
@observer
class Router extends React.Component {

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


  handleFrontNotification() {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      console.log('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });
  }

  async componentDidMount() {
    this.messageListener = messaging().onMessage(async message => this.store.saveNotification(message))
  }

  componentWillUnmount() {
    this.messageListener();
  }
  BottomTabScreen = () => {
    return (
      <BottomTab.Navigator
        tabBar={props => <MyTabBar {...props} logined={this.store.logined} />}>
        <Stack.Screen
          name="Main"
          component={Main}
          options={{ tabBarLabel: 'main' }}
        />
        <Stack.Screen
          name="BuyHistory"
          component={BuyHistory}
          options={{ tabBarLabel: 'shoppingHistory' }}
        />

        <Stack.Screen
          name="ShoppingCart"
          component={ShoppingCart}
          options={{ tabBarLabel: 'ShoppingCart' }}
        />
        <Stack.Screen
          name="Favorite"
          component={Favorite}
          options={{ tabBarLabel: 'myfavourite' }}
        />

        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ tabBarLabel: 'acAndSetting' }}
        />
      </BottomTab.Navigator>
    );
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1,backgroundColor:'white' }}>
        <Stack.Navigator initialRouteName="SplashScreen">
          {!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="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="AddName"
                  component={AddName}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ForgotPassword"
                  component={ForgotPassword}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ShoppingCart"
                  component={ShoppingCart}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="Order"
                  component={Order}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="News"
                  component={News}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="HistoryDetails"
                  component={HistoryDetails}
                  options={{ headerShown: false }}
                />

                <Stack.Screen
                  name="CreditCard"
                  component={CreditCard}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="AddressSetting"
                  component={AddressSetting}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="Setting"
                  component={Setting}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="Search"
                  component={Search}
                  options={{
                    headerShown: false,
                    // animationEnabled: false,
                  }}
                />
                <Stack.Screen
                  name="GroupDetails"
                  component={GroupDetails}
                  options={{
                    headerShown: false,
                    // animationEnabled: false,
                  }}
                />
                <Stack.Screen
                  name="GroupList"
                  component={GroupList}
                  options={{
                    headerShown: false,
                    // animationEnabled: false,
                  }}
                />
                <Stack.Screen
                  name="RedeemGifts"
                  component={RedeemGifts}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="ManageMembers"
                  component={ManageMembers}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="SalesRecord"
                  component={SalesRecord}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="RedeemRecord"
                  component={RedeemRecord}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="FullScreen"
                  component={FullScreen}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="Notification"
                  component={Notification}
                  options={{
                    headerShown: false,
                  }}
                />
                <Stack.Screen
                  name="Tutorial"
                  component={Tutorial}
                  options={{
                    headerShown: false,
                  }}
                />
              </>
            )}
        </Stack.Navigator>
      </SafeAreaView>
    );
  }
}

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;