import React from 'react';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
import HomeScreen from './Home/HomeScreen';
import DeviceList from './device/deviceList';
import BindIndex from './bind/bind_index';
import SnBind from './bind/sn_bind';
import ConfirmBind from './bind/ConfirmBind';
// import BleBind from './bind/ble_bind';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  DeviceList: undefined;
  BindIndex: undefined;
  SnBind: undefined;
  ConfirmBind: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

// 修改类型定义
const createScreenOptions = (title: string): StackNavigationOptions => {
  return {
    title,
    headerTitleAlign: 'center',
    headerStyle: {
      backgroundColor: '#F3FCFF',
    },
    headerTitleStyle: {
      fontSize: 18,
      fontWeight: '500',
    },
  };
};

type Props = {
  navigation: any;
  route: any;
};

export default function HomeStackNavigator({ navigation, route }: Props) {
  React.useEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    const hideTabBarRoutes = ['DeviceList', 'BindIndex', 'SnBind', 'BleBind', 'ConfirmBind']; // 添加新的路由名
    const shouldHideTabBar = hideTabBarRoutes.includes(routeName);
    
    navigation.getParent()?.setOptions({
      tabBarStyle: shouldHideTabBar ? { display: 'none' } : undefined
    });
  }, [navigation, route]);


  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Home" 
        component={HomeScreen}  
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="DeviceList" 
        component={DeviceList}
        options={createScreenOptions('设备列表')}
      />
      <Stack.Screen 
        name="BindIndex" 
        component={BindIndex}
        options={createScreenOptions('扫码绑定')}
      />
      <Stack.Screen 
        name="SnBind" 
        component={SnBind}
        options={createScreenOptions('手动绑车')}
    />
    <Stack.Screen 
        name="ConfirmBind" 
        component={ConfirmBind}
        options={createScreenOptions('确认绑定')}
      />
    </Stack.Navigator>
  );
}