import React from 'react';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
import HomeScreen from '../views/Home/HomeScreen';
import DeviceList from '../views/device/deviceList';
import BindIndex from '../views/bind/bind_index';
// import SnBind from '../views/bind/sn_bind';
import ConfirmBind from '../views/bind/ConfirmBind';
import DeviceMap from '../views/device/deviceMap';
import DeviceSet from '../views/device/deviceSet'; 
import UnlockSetting from '../views/device/UnlockSetting';
import BleDistance from '../views/device/BleDistance';
import DeviceShare from '../views/device/DeviceShare';
import AddShare from '../views/device/AddShare';
import ShareQrcode from '../views/device/shareQrcode'; 
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { HomeStackParamList } from './types';
import TestBule from '../views/device/test_bule';
import ShareDetailScreen from '../views/device/KeyDetail';
import ExpiredKeysScreen from '../views/device/ExpiredKeysScreen';
const Stack = createStackNavigator<HomeStackParamList>();

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';
  }, [navigation, route]);

  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Home" 
        component={HomeScreen}  
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="ShareDetailScreen" 
        component={ShareDetailScreen}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="TestBule" 
        component={TestBule}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="DeviceList" 
        component={DeviceList}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="BindIndex" 
        component={BindIndex}
        options={{
          headerShown: false,
        }}
      />
      {/* <Stack.Screen 
        name="SnBind" 
        component={SnBind}
        options={createScreenOptions('手动绑车')}
      /> */}
      <Stack.Screen 
        name="ExpiredKeysScreen" 
        component={ExpiredKeysScreen}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="ConfirmBind" 
        component={ConfirmBind}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen 
        name="DeviceMap" 
        component={DeviceMap}
        options={createScreenOptions('设备位置')}
      />  
      <Stack.Screen 
        name="DeviceSet" 
        component={DeviceSet}
        options={createScreenOptions('车辆设置')}
      />  
      <Stack.Screen 
        name="UnlockSetting" 
        component={UnlockSetting}
        options={createScreenOptions('无感解锁')}
      />  
      <Stack.Screen 
        name="BleDistance" 
        component={BleDistance}
        options={createScreenOptions('蓝牙距离')}
      />  
      <Stack.Screen 
        name="DeviceShare" 
        component={DeviceShare}
        options={createScreenOptions('车辆共享')}
      />  
      <Stack.Screen 
        name="AddShare" 
        component={AddShare}
        options={createScreenOptions('添加共享人')}
      />  
      <Stack.Screen 
        name="ShareQrcode" 
        component={ShareQrcode}
        options={createScreenOptions('分享二维码')}
      />
    </Stack.Navigator>
  );
}