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

 import React from 'react';
 import {StyleSheet, ScrollView, View, Text, StatusBar} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {colors} from './src/assets/styles/colors-theme';
 import Router from './router';
 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 buyHistory from './src/pages/buyHistory/buyHistory';
 import Favorite from './src/pages/favorite/favorite';
 import Profile from './src/pages/profile/profile';
 import BuyHistory from './src/pages/buyHistory/buyHistory';
 Icon.loadFont();
 console.disableYellowBox = true;
 const Stack = createStackNavigator();
 const BottomTab = createBottomTabNavigator();
 const BottomTabScreen = () => (
   <BottomTab.Navigator
     screenOptions={({route}) => ({
       tabBarIcon: ({focused, color, size}) => {
         let iconName;
         switch (route.name) {
           case 'Main':
             iconName = 'home-variant';
             break;
           case 'BuyHistory':
             iconName = 'cart';
             break;
           case 'Favorite':
             iconName = 'heart';
             break;
           case 'Profile':
             iconName = 'account-circle';
             break;
         }
         return (
           <Icon
             name={iconName}
             size={size}
             color={color}
             style={{marginTop: 5}}
           />
         );
       },
     })}
     tabBarOptions={{
       activeTintColor: 'tomato',
       inactiveTintColor: 'gray',
     }}>
     <Stack.Screen
       name="Main"
       component={Main}
       options={{tabBarLabel: '主頁'}}
     />
     <Stack.Screen
       name="Favorite"
       component={Favorite}
       options={{tabBarLabel: '我的清單'}}
     />
     <Stack.Screen
       name="BuyHistory"
       component={BuyHistory}
       options={{tabBarLabel: '購買記錄'}}
     />
     <Stack.Screen
       name="Profile"
       component={Profile}
       options={{tabBarLabel: '賬號/設定'}}
     />
   </BottomTab.Navigator>
 );
 const App: () => React$Node = () => {
   return (
     <>
       <Provider {...Store}>
         <SafeAreaProvider>
           <StatusBar
             animated={true}
             barStyle={'light-content'}
             backgroundColor={colors.mainColor}
             translucent={true}
           />
           <NavigationContainer
             onStateChange={state => Store.appStore.setRouterState(state)}
             ref={navigatorRef => Store.appStore.setRouterRef(navigatorRef)}>
             <Router />
           </NavigationContainer>
         </SafeAreaProvider>
       </Provider>
     </>
   );
 };
 
 const styles = StyleSheet.create({
   scrollView: {
     backgroundColor: Colors.lighter,
   },
   engine: {
     position: 'absolute',
     right: 0,
   },
   body: {
     backgroundColor: colors.bgc,
   },
   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 App;