import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';
import useModel from 'flooks';
import { useTranslation } from 'react-i18next';

import { NoticeStackParamList } from '../types';

import ChatScreen from '../notice/ChatScreen';
import EmailDetailScreen from '../notice/EmailDetailScreen';

const NoticeStack = createStackNavigator<NoticeStackParamList>();
export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  const { t } = useTranslation();
  return (
    <NoticeStack.Navigator
      initialRouteName="EmailDetail"
      screenOptions={{
        cardOverlayEnabled: true,
        cardStyle: { backgroundColor: '#f2f2f2', flex: 1 },
        contentStyle: { backgroundColor: '#f2f2f2', flex: 1 },
        gestureEnabled: true,
        stackPresentation: 'push',
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        headerStyle: {
          backgroundColor: '#FFC21C',
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
          shadowRadius: 0,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerTitleAlign: 'center',
        headerBackTitleVisible: false,
      }}
    >
      <NoticeStack.Screen
        name="Chat"
        component={ChatScreen}
        options={{ title: t('liao-tian') }}
      />
      <NoticeStack.Screen
        name="EmailDetail"
        component={EmailDetailScreen}
        options={{ title: t('xi-tong-ti-xing') }}
        initialParams={{ emailId: 2160 }}
      />
    </NoticeStack.Navigator>
  );
}