import "react-native-gesture-handler";
import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Provider, useDispatch } from "react-redux";
import store from "./store";
import { ThemeProvider } from "@Styles";
import '@i18n'

import { useFonts } from "expo-font";
import RootNavigation from "./navigation/RootNavigation";
import { getData, getObjectData } from "./service/asyncStorage";
import {
  JWT_REFRESH_TOKEN,
  JWT_TOKEN,
  LANGUAGE,
} from "@Constants/localStorage";
import { fetchUserSuccess } from "@Store/actions/login/loginActions";
import { addHeaderToken } from "./request";
import { useTranslation } from "react-i18next";

function App() {
  const { i18n } = useTranslation();
  const dispatch = useDispatch();
  const initialSetup = async () => {
    const token = await getData(JWT_TOKEN);
    const refreshToken = await getData(JWT_REFRESH_TOKEN);
    const language = await getObjectData(LANGUAGE);

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

    if (token) {
      addHeaderToken(token);
    }
    if (token !== undefined && refreshToken !== undefined) {
      dispatch(fetchUserSuccess({ jwt: token, refreshToken }));
    }
  };

  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}>
      <ThemeProvider>
        <App />
      </ThemeProvider>
    </Provider>
  );
};

export default AppWrapper;