import React from 'react';
import {
  createStackNavigator,
  TransitionPresets,
} from '@react-navigation/stack';
import { MainParamList } from '@app/routes/MainParamList.ts';
import {
  HEADER_TINT_COLOR,
  HEADER_TITLE_FONT_SIZE,
  HEADER_TITLE_FONT_WEIGHT,
} from '@common/constants';
import HeaderBackImage from '@common/components/HeaderBackImage.tsx';
import MainViewScreen from '../screens/main/MainViewScreen';

const Stack = createStackNavigator<MainParamList>();

export function MainStack() {
  // const navigation = useNavigation<NavigationProp<MainParamList>>();

  return (
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: 'center', // 安卓标题居中
        headerShadowVisible: false,
        headerTintColor: HEADER_TINT_COLOR,
        headerTitleStyle: {
          fontSize: HEADER_TITLE_FONT_SIZE,
          fontWeight: HEADER_TITLE_FONT_WEIGHT,
        },
        headerBackImage: HeaderBackImage,
      }}
      initialRouteName="MainView"
    >
      <Stack.Group
        screenOptions={{
          ...TransitionPresets.SlideFromRightIOS,
        }}
      >
        <Stack.Screen name="MainView" component={MainViewScreen} />
        {/* 普通栈路由 --> 写这里 */}
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          presentation: 'transparentModal',
          headerShown: false,
        }}
      >
        {/* 对话框形式路由 --> 写这里 */}
      </Stack.Group>
    </Stack.Navigator>
  );
}
