import * as React from "react";
import * as eva from "@eva-design/eva";
import {
    ApplicationProvider,
    Layout,
    Button,
    IconRegistry,
    Text,
    Modal,
} from "@ui-kitten/components";
import { EvaIconsPack } from "@ui-kitten/eva-icons";
import { default as theme } from "./theme.json"; // <-- Import app theme
import { default as customMapping } from "./mapping.json"; // <-- Import app theme

import { SplashScreen } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import { NavigationContainer } from "@react-navigation/native";
import {
    createStackNavigator,
    CardStyleInterpolators,
} from "@react-navigation/stack";
import Dialog from "./components/Dialog";

import { useModel } from "flooks";
import * as models from "./models";

import LoadingModel from "./navigation/LoadingModel";
import BottomTabNavigator from "./navigation/BottomTabNavigator";
import LoginStackNavigator from "./navigation/LoginStackNavigator";
import GuideStackNavigator from "./navigation/GuideStackNavigator";
import BasicScreens from "./navigation/BasicNavigator";
import { navigationRef } from "./navigation/RootNavigation";

import * as ApplyStatus from "./config/ApplyStatus";

const Stack = createStackNavigator();

const config = {
    animation: "spring",
    config: {
        stiffness: 1000,
        damping: 500,
        mass: 3,
        overshootClamping: true,
        restDisplacementThreshold: 0.01,
        restSpeedThreshold: 0.01,
    },
};

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = React.useState(false);
    // Load any resources or data that we need prior to rendering the app
    React.useEffect(() => {
        async function loadResourcesAndDataAsync() {
            try {
                SplashScreen.preventAutoHide();
                // Load fonts
                await Font.loadAsync({
                    ...Ionicons.font,
                    "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
                });
            } catch (e) {
                // We might want to provide this error information to an error reporting service
                console.warn(e);
            } finally {
                setLoadingComplete(true);
                SplashScreen.hide();
            }
        }

        loadResourcesAndDataAsync();
    }, []);

    if (!isLoadingComplete && !props.skipLoadingScreen) {
        return null;
    } else {
        return (
            <>
                <IconRegistry icons={EvaIconsPack} />
                <ApplicationProvider
                    {...eva}
                    theme={{ ...eva.light, ...theme }}
                    customMapping={customMapping}
                >
                    <Dialog />
                    <Layout style={{ flex: 1 }}>
                        <NavigationContainer ref={navigationRef}>
                            <Stack.Navigator
                                headerMode='none'
                                initialRouteName='LoadingModel'
                                screenOptions={{
                                    gestureEnabled: true,
                                    cardStyleInterpolator:
                                        CardStyleInterpolators.forHorizontalIOS,
                                }}
                            >
                                <Stack.Screen
                                    name='LoadingModel'
                                    component={LoadingModel}
                                />
                                {/* 首页tab组件页面 */}
                                <Stack.Screen
                                    name='Root'
                                    component={BottomTabNavigator}
                                />
                                {/* 注册后指南页面 */}
                                <Stack.Screen
                                    name='Guide'
                                    component={GuideStackNavigator}
                                />
                                {/* 登录部分页面 */}
                                <Stack.Screen
                                    name='Login'
                                    component={LoginStackNavigator}
                                />
                                {/* 基础功能页面 */}
                                {BasicScreens(Stack.Screen)}
                            </Stack.Navigator>
                        </NavigationContainer>
                    </Layout>
                </ApplicationProvider>
            </>
        );
    }
}

const container = {
    flex: 1,
    backgroundColor: "#fff",
};