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

const useFullScreen = needFullscreen => {
  const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
  const ref = useRef();

  useEffect(() => {
    const handleToggleFullScreen = () => {
      if (!document.fullscreenElement && window.location.pathname !== `/civbase/${window.globalConfig.homepage}`) {
        window.history.replaceState({ delete: true }, null, `/civbase/${window.globalConfig.homepage}`);
      }
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleToggleFullScreen);
    return () => {
      document.removeEventListener('fullscreenchange', handleToggleFullScreen);
    };
  }, []);

  const handleFullScreen = useCallback(() => {
    ref.current?.requestFullscreen();
  }, []);

  const handleExitFullScreen = useCallback(() => {
    document.exitFullscreen();
  }, []);

  const handleExit = useCallback(() => {
    document.exitFullscreen();
  }, []);

  useEffect(() => {
    needFullscreen && handleFullScreen();
  }, [handleFullScreen, needFullscreen]);

  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen, handleExit];
};

export default useFullScreen;