import React from 'react';
import {
  createStackNavigator,
  TransitionPresets,
} from '@react-navigation/stack';

import HeaderBackImage from '@common/components/HeaderBackImage.tsx';
import { LoginParamList } from '@app/routes/login/LoginParamList.ts';
import {
  HEADER_TINT_COLOR,
  HEADER_TITLE_FONT_SIZE,
  HEADER_TITLE_FONT_WEIGHT,
} from '@common/constants';
import { CommonParamList } from '@common/router/CommonParamList.ts';
import LoginScreen from '@app/screens/login/login/LoginScreen.tsx';
import RegisterScreen from '@app/screens/login/register/RegisterScreen.tsx';
import EnvironmentScreen from '@app/screens/login/environment/EnvironmentScreen.tsx';
import LoginWithSMSScreen from '@app/screens/login/loginWithSMS/LoginWithSMSScreen.tsx';
import ForgotPasswordScreen from '@app/screens/login/forgotPassword/ForgotPasswordScreen.tsx';
import ChangePhoneScreen from '@app/screens/login/changePhone/ChangePhoneScreen.tsx';
import AgreementScreen from '@app/screens/login/agreement/AgreementScreen.tsx';
import WebViewScreen from '@common/screens/webview/WebViewScreen.tsx';
import AgreementContentScreen from '@app/screens/login/agreement/AgreementContentScreen.tsx';

const Stack = createStackNavigator<LoginParamList & CommonParamList>();

export function LoginStack() {
  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="Login"
    >
      <Stack.Group
        screenOptions={{
          ...TransitionPresets.SlideFromRightIOS,
        }}
      >
        <Stack.Screen name="WebView" component={WebViewScreen} />
        <Stack.Screen
          name="AgreementContent"
          component={AgreementContentScreen}
        />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Environment" component={EnvironmentScreen} />
        <Stack.Screen name="LoginWithSMS" component={LoginWithSMSScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="ChangePhone" component={ChangePhoneScreen} />
        {/* 普通栈路由 --> 写这里 */}
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          presentation: 'transparentModal',
          headerShown: false,
        }}
      >
        <Stack.Screen name="Agreement" component={AgreementScreen} />
        {/* 对话框形式路由 --> 写这里 */}
      </Stack.Group>
    </Stack.Navigator>
  );
}
