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 { useFonts } from "expo-font";
import RootNavigation from "./navigation/RootNavigation";
import { getData } from "./service/asyncStorage";
import { JWT_REFRESH_TOKEN, JWT_TOKEN } from "./constants/localStorage";
import { fetchUserSuccess } from "./store/actions/login/loginActions";
import { addHeaderToken } from "./request";

function App() {
  const dispatch = useDispatch();
  const getToken = async () => {
    const token = await getData(JWT_TOKEN);
    const refreshToken = await getData(JWT_REFRESH_TOKEN);

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

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

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

export default AppWrapper;