import { useEffect, useRef } from "react";

export function useOverlayFocus(
  visible: boolean,
  innerElementRef: React.MutableRefObject<HTMLElement>
) {
  const outSideActiveElementRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (visible) {
      if (innerElementRef.current) {
        outSideActiveElementRef.current = document.activeElement as HTMLElement;
        innerElementRef.current.focus({ preventScroll: true });
      }
    } else if (outSideActiveElementRef.current) {
      outSideActiveElementRef.current.focus({ preventScroll: true });
      outSideActiveElementRef.current = null;
    }
  }, [innerElementRef, visible]);
}