import { useEffect, useRef, useState } from 'react';

/**
 * Called when page visibility changes
 *
 * This can be used as a proxy for page unload and tends to be more reliably
 * fired on mobile devices, but is not necessarily the last event on the page
 */
export default function usePageVisibility(
  callback?:
    | ((e: Event, visibilityState: DocumentVisibilityState) => void)
    | null,
  options?: { enabled?: boolean }
) {
  const { enabled = true } = options || {};

  const [visibilityState, setVisibilityState] = useState(
    typeof document === 'undefined' ? undefined : document.visibilityState
  );

  const callbackRef = useRef(callback);
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    if (!enabled) return;

    const handleVisibilityChange = (e: Event) => {
      setVisibilityState(document.visibilityState);
      callbackRef.current?.(e, document.visibilityState);
    };

    setVisibilityState(document.visibilityState);
    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [enabled]);

  return [visibilityState];
}