import { ReactElement, ReactNode } from 'react';
import { AppStateProvider } from './useIsAppForeground';
import { VisibilityChangedProvider } from './useVisibilityChanged';

interface Props {
  isVisible: boolean;
  children: ReactNode;
}

/**
 * @name VisibilityProvider
 * @description
 * ReactNative 뷰가 현재 포그라운드(foreground) 상태인지 여부를 관리하는 Provider에요.
 * @param {boolean} isVisible - 앱이 포그라운드(foreground) 상태인지 여부예요.
 * @param {ReactNode | undefined} children - `AppState` 를 바라보는 자식 컴포넌트예요.
 * @returns {ReactElement} - `VisibilityChangedProvider` 로 감싼 React Provider 컴포넌트예요.
 * @example
 * ```typescript
 *
 * function App() {
 *  return (
 *   <VisibilityProvider isVisible={true}>
 *     <MyApp />
 *   </VisibilityProvider>
 *  );
 * }
 *
 * ```
 */
export function VisibilityProvider({ isVisible, children }: Props): ReactElement {
  return (
    <VisibilityChangedProvider isVisible={isVisible}>
      <AppStateProvider>{children}</AppStateProvider>
    </VisibilityChangedProvider>
  );
}