import { useEffect, useState } from "react";

export function useFullscreenPopoverContainer() {
  const [isFullscreen, setIsFullscreen] = useState<boolean>(
    !!document.fullscreenElement
  );
  const [container, setContainer] = useState<Element | undefined>(
    document.fullscreenElement ?? undefined
  );

  useEffect(() => {
    const handleFullscreenChange = () => {
      const el = document.fullscreenElement ?? undefined;
      setIsFullscreen(!!el);
      setContainer(el);
    };

    document.addEventListener("fullscreenchange", handleFullscreenChange);
    return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
    };
  }, []);

  return { isFullscreen, container };
}