import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import Home from './pages/Home';
import {Icon} from '@rneui/themed';
import Mine from './pages/Mine';
import SignIn from './pages/SignIn';
import {useSelector} from 'react-redux';
import {selectToken} from './pages/Mine/userSlice';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

const RouterScreen = () => {
  const token = useSelector(selectToken);
  return (
    <NavigationContainer>
      {token ? (
        <Tab.Navigator
          screenOptions={{
            headerShown: false,
          }}>
          <Tab.Screen
            name="home"
            component={Home}
            options={{
              title: '首页',
              tabBarIcon: ({color}) => {
                return <Icon color={color} name="dehaze" />;
              },
            }}
          />
          <Tab.Screen
            name="mine"
            component={Mine}
            options={{
              title: '设置',
              tabBarIcon: ({color}) => {
                return <Icon color={color} name="person" />;
              },
            }}
          />
        </Tab.Navigator>
      ) : (
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}>
          <Stack.Screen name="SignIn" component={SignIn} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
};

export default RouterScreen;