import {
  useNetInfo,
} from "@react-native-community/netinfo";
import { NavigationContainer } from "@react-navigation/native";
import { useReactNavigationDevTools } from "@rozenite/react-navigation-plugin";
import type { PropsWithChildren } from "react";
import React, { useRef } from "react";
import { Alert } from "react-native";
import { logFirebaseScreenView } from "sharedHelpers/tracking";
import { useTranslation } from "sharedHooks";

import { navigationRef } from "./navigationUtils";

const OfflineNavigationGuard = ( { children }: PropsWithChildren ) => {
  const routeNameRef = useRef( navigationRef.current?.getCurrentRoute()?.name );
  const { isConnected } = useNetInfo( );
  const { t } = useTranslation( );

  useReactNavigationDevTools( { ref: navigationRef } );

  // if a user tries to navigate to the Login screen while they're
  // offline, they'll see this no internet alert and automatically land
  // back on the screen they came from
  const onStateChange = ( ) => {
    const previousRouteName = routeNameRef.current;
    const currentRouteName = navigationRef.current?.getCurrentRoute( )?.name;
    // Basic screen tracking with Firebase Analytics
    if ( previousRouteName !== currentRouteName && currentRouteName ) {
      logFirebaseScreenView( currentRouteName );
    }
    if ( currentRouteName === "Login" && !isConnected ) {
      // return to previous screen if offline
      navigationRef.current?.goBack( );
      if ( !isConnected ) {
        Alert.alert(
          t( "Internet-Connection-Required" ),
          t( "Please-try-again-when-you-are-connected-to-the-internet" ),
        );
      }
    }
  };

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
      }}
      onStateChange={onStateChange}
    >
      {children}
    </NavigationContainer>
  );
};

export default OfflineNavigationGuard;
