import "react-native-gesture-handler";
import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Provider } from "react-redux";
import { store, persistor } from "@features/store";
import { PersistGate } from "redux-persist/integration/react";
import { ThemeProvider } from "@styles";
import "@i18n";

import { useFonts } from "expo-font";
import RootNavigation from "./navigation/RootNavigation";
import { useTranslation } from "react-i18next";
import { getObjectData } from "@service/asyncStorage";
import { LANGUAGE } from "@constants/localStorage";

function App() {
  const { i18n } = useTranslation();
  const initialSetup = async () => {
    const language = await getObjectData(LANGUAGE);

    if (language !== null) {
      await i18n.changeLanguage(language.code);
    }
  };

  useEffect(() => {
    initialSetup();
  }, []);

  return (
    <NavigationContainer>
      <RootNavigation />
    </NavigationContainer>
  );
}

const AppWrapper = () => {
  const [fontsLoaded] = useFonts({
    "poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
    "poppins-semibold": require("./assets/fonts/Poppins-SemiBold.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
};

export default AppWrapper;