import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, StyleSheet, Image, Platform } from 'react-native';
import ShopScreens from './src/views/ShopScreen';
import ProfileScreens from './src/views/ProfileScreen';
import 'react-native-gesture-handler';
import { enableScreens } from 'react-native-screens';
import HomeStackNavigator from './src/views/HomeStackNavigator';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

enableScreens();

type RootStackParamList = {
  '爱车': undefined;
  '商城': undefined;
  '个人中心': undefined;
};

const Tab = createBottomTabNavigator<RootStackParamList>();

function App() {
  const getTabBarVisibility = (route: any) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    const showOnScreens = ['Home']; // 只在 Home 页面显示底部导航栏
    return showOnScreens.includes(routeName) ? 'flex' : 'none';
  };
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
          name="爱车"
          component={HomeStackNavigator}
          options={({ route }) => ({
            tabBarIcon: ({ color, size }) => (
              <Image
                source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/unny4QdTukoNl8fZYtkf' }}
                style={{ width: size, height: size, tintColor: color }}
                resizeMode="contain"
              />
            ),
            tabBarStyle: {
              display: getTabBarVisibility(route)
            }
          })}
        />
        <Tab.Screen
          name="商城"
          component={ShopScreens}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Image
                source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uqJNRvkwMS4ndouxoYlX' }}
                style={{ width: size, height: size, tintColor: color }}
                resizeMode="contain"
              />
            ),
          }}
        />
        <Tab.Screen
          name="个人中心"
          component={ProfileScreens}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Image
                source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uroSSfFVSob2kEvqTaD4' }}
                style={{ width: size, height: size, tintColor: color }}
                resizeMode="contain"
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;