import React, { useEffect } from "react";
import { StatusBar } from "react-native";

import { useFonts } from "expo-font";
import { Provider as PaperProvider } from "react-native-paper";
import { Provider } from "react-redux";
import { persistor, store } from "./src/redux/store";
import { PersistGate } from "redux-persist/lib/integration/react";
import * as SplashScreen from "expo-splash-screen";

import Main from "./src/navigators/Main";

import { createDB } from "./src/database/DBHelper";
import { fonts } from "./src/theme/fonts";

const App = () => {
    const [loaded] = useFonts(fonts);

    useEffect(() => {
        SplashScreen.preventAutoHideAsync();
        createDB();
    }, []);

    if (!loaded) {
        return null;
    }

    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <PaperProvider>
                    <StatusBar
                        translucent={true}
                        backgroundColor="transparent"
                    />
                    <Main />
                </PaperProvider>
            </PersistGate>
        </Provider>
    );
};

export default App;