import { useEffect, useState } from 'react';

// Set the name of the hidden property and the change event for visibility
let hidden: string | undefined;
let visibilityChange: string | undefined;
export function getPageIsVisible() {
  if (hidden === undefined || visibilityChange === undefined) {
    if (typeof document.hidden !== 'undefined') {
      // Opera 12.10 and Firefox 18 and later support
      hidden = 'hidden';
      visibilityChange = 'visibilitychange';
      // @ts-ignore
    } else if (typeof document.msHidden !== 'undefined') {
      hidden = 'msHidden';
      visibilityChange = 'msvisibilitychange';
      // @ts-ignore
    } else if (typeof document.webkitHidden !== 'undefined') {
      hidden = 'webkitHidden';
      visibilityChange = 'webkitvisibilitychange';
    }
  }

  // @ts-ignore
  const isHidden = hidden && document[hidden];
  return !isHidden;
}

/**
 * Page Visibility API
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#example
 */
export function usePageIsVisible() {
  const [pageIsVisible, setPageIsVisible] = useState(true);

  useEffect(() => {
    // 初始化 hidden 和 visibilityChange
    getPageIsVisible();

    // If the page is hidden, pause the video;
    // if the page is shown, play the video
    function handleVisibilityChange() {
      const isVisible = getPageIsVisible();
      setPageIsVisible(isVisible);
    }

    // Warn if the browser doesn't support addEventListener or the Page Visibility API
    if (
      typeof document.addEventListener === 'undefined' ||
      hidden === undefined ||
      visibilityChange === undefined
    ) {
      console.log(
        'This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.',
      );
    } else {
      // Handle page visibility change
      document.addEventListener(
        visibilityChange,
        handleVisibilityChange,
        false,
      );
    }

    return () => {
      if (visibilityChange) {
        document.removeEventListener(visibilityChange, handleVisibilityChange);
      }
    };
  }, []);

  return pageIsVisible;
}