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

import React 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 Store from './src/stores/index';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { Provider, inject, observer } from 'mobx-react';
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 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 SignUpVerify from './src/pages/signup/signUpVerify';
import ForgotPassword from './src/pages/signup/forgotPassword';
Icon.loadFont();

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

const Router = inject("appStore")(observer(class Router extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  BottomTabScreen = () => {
    return (
      <BottomTab.Navigator
        tabBar={props => <MyTabBar {...props} logined={this.store.logined} />}>
        <Stack.Screen
          name="Main"
          component={Main}
          options={{ tabBarLabel: 'main', headerShown: false }}
        />
        <Stack.Screen
          name="Favorite"
          component={Favorite}
          options={{ tabBarLabel: 'myfavourite', headerShown: false }}
        />
        <Stack.Screen
          name="BuyHistory"
          component={BuyHistory}
          options={{ tabBarLabel: 'shoppingHistory', headerShown: false }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ tabBarLabel: 'acAndSetting', headerShown: false }}
        />
      </BottomTab.Navigator>
    );
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.mainColor }}>
        <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="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="Search"
                component={Search}
                options={{
                  headerShown: false,
                  // animationEnabled: 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;