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

//弹窗模块
import AlertModalScreen from '../modals/AlertModalScreen';
import ModalStackNavigator from './ModalStackNavigator';

//登录模块堆栈
import LoginStackNavigator from './LoginStackNavigator';

//首页堆栈
import MainTabNavigator from './MianTabNavigator';

//我的模块堆栈
import MineStackNavigator from './MineStackNavigator';

import OrderStackNavigator from './OrderStackNavigator';

import NoticeStackNavigator from './NoticeStackNavigator';

import { useCreation } from 'ahooks';

import { RootStackParamList } from '../types';
import LinkingConfiguration from './LinkingConfiguration';

import User from '../stores/User';

export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  const { initialRouteName } = useModel(User, ['initialRouteName']);
  const navRef = React.useRef();

  const initRoute = useCreation(() => {
    // if (__DEV__) {
    //   return {
    // 		name: 'Modal',
    // 		screen:'OrderDetail'
    //   };
    // } else {
    return {
      name: initialRouteName !== 'MainStack' ? 'LoginStack' : initialRouteName,
      screen: initialRouteName !== 'MainStack' ? initialRouteName : 'Order',
    };
    // }
  }, [__DEV__, initialRouteName]);

  React.useEffect(() => {
    if (navRef.current) {
      navRef.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: initRoute.name,
              screen: initRoute.screen,
            },
          ],
        })
      );
    }
  }, [navRef, initRoute]);

  return (
    <NavigationContainer
      ref={navRef}
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
    >
      <RootNavigator initRoute={initRoute} />
    </NavigationContainer>
  );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator({ initRoute }) {
  const { t } = useTranslation();
  return (
    <Stack.Navigator
      initialRouteName={initRoute.name}
      screenOptions={{
        stackPresentation: 'push',
        headerShown: false,
      }}
    >
      <Stack.Screen
        name="LoginStack"
        component={LoginStackNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />
      <Stack.Screen
        name="MainStack"
        component={MainTabNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />
      <Stack.Screen
        name="MineStack"
        component={MineStackNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />
      <Stack.Screen
        name="NoticeStack"
        component={NoticeStackNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />
      <Stack.Screen
        name="OrderStack"
        component={OrderStackNavigator}
        options={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      />

      <Stack.Screen
        name="Modal"
        mode="modals"
        component={ModalStackNavigator}
        options={{
          cardStyle: { backgroundColor: 'transparent' },
          animationEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}