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

function Timepiece() {
  let [count, setCount] = useState(30);
  let timer = useRef(null);

  function countDown() {
    if (timer.current) {
      clearInterval(timer.current);
    }
    timer.current = setInterval(() => {
      count -= 1;
      setCount(count);
      if (count <= 0) {
        setCount(0);
        clearInterval(timer.current);
      }
      console.log("[]", count);
    }, 1000);
  }

  let hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }

  //当你切换到另一个标签时倒计时会暂停，当你返回到当前标签时倒计时会再次执行
  function visibilitychangeEvent() {
    console.log("[]", document[hidden]);
    if (document[hidden]) {
      clearInterval(timer.current);
    } else {
      countDown();
    }
  }

  useEffect(() => {
    console.log("[Community]");
    countDown();
    document.addEventListener(visibilityChange, visibilitychangeEvent);

    return () => {
      console.log("[清除函数]");
      clearInterval(timer.current);
      document.removeEventListener(visibilityChange, visibilitychangeEvent);
    };
  }, []); // eslint-disable-line

  return (
    <>
      <div>倒计时：{count}</div>
    </>
  );
}

export default Timepiece;