import { useIsFocused } from '@react-navigation/native'
import { useLayoutEffect } from '@codeleap/hooks'
import { StatusBar, StatusBarStyle } from 'react-native'

type UseStatusBarOptions = {
  statusBarColor?: StatusBarStyle
}

/**
 * Uses the stack-based `pushStackEntry`/`popStackEntry` API so that nested screens can each set a style and restore the parent's style on unmount — imperative `setBarStyle` calls would stomp each other. On Android the background colour of the status bar is controlled separately via the system theme; only `barStyle` (light/dark content) is affected here.
 */
export function useStatusBar({ statusBarColor }: UseStatusBarOptions) {
  const focused = useIsFocused()

  useLayoutEffect(() => {
    if (!focused || !statusBarColor) return

    const statusBarEntry = StatusBar.pushStackEntry({ barStyle: statusBarColor })
    
    return () => {
      StatusBar.popStackEntry(statusBarEntry)
    }
  }, [statusBarColor, focused])
}