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 { OrderStackParamList } from '../types';

import OrderDetailScreen from '../order/OrderDetailScreen';
import OrderMapScreen from '../map/OrderMapScreen';
import RoutePlanScreen from '../map/RoutePlanScreen';

const OrderStack = createStackNavigator<OrderStackParamList>();
export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  const { t } = useTranslation();
  return (
    <OrderStack.Navigator
      screenOptions={{
        cardOverlayEnabled: true,
        cardStyle: { backgroundColor: '#f2f2f2', flex: 1 },
        contentStyle: { backgroundColor: '#f2f2f2', flex: 1 },
        gestureEnabled: true,
        stackPresentation: 'push',
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        headerStyle: {
          backgroundColor: '#FFC21C',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerTitleAlign: 'center',
        headerBackTitleVisible: false,
      }}
    >
      <OrderStack.Screen
        name="OrderDetail"
        component={OrderDetailScreen}
        options={{ title: t('ding-dan-xiang-qing') }}
        initialParams={{ orderId: 3076 }}
      />
      <OrderStack.Screen
        name="OrderMap"
        component={OrderMapScreen}
        options={{ title: t('di-tu') }}
      />
      <OrderStack.Screen
        name="RoutePlan"
        component={RoutePlanScreen}
        options={{ title: t('lu-xian-gui-hua') }}
      />
    </OrderStack.Navigator>
  );
}