import React, { createContext, useEffect, useState } from 'react';
import { AppState } from 'react-native';

export const GlobalVariablesContext = createContext(null);

export const GlobalVariablesProvider = ({ children }) => {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (appState.match(/active/) && nextAppState.match(/inactive|background/)) {
        console.log('App is in background or inactive');
      } else if (appState.match(/inactive|background/) && nextAppState === 'active') {
        console.log('App is in the foreground');
      }
      setAppState(nextAppState);
    };
    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      subscription.remove();
    };
  }, [appState]);

  const exportedVariables = {
    appState,
    setAppState
  }

  return (
    <GlobalVariablesContext.Provider value={exportedVariables}>
      {children}
    </GlobalVariablesContext.Provider>
  )
};