import { useCallback, useState } from "react";
import { Entity, EllipseGraphics, useCesium } from "resium";
import { Color, Cartesian3 } from "cesium";
import { useInterval } from "ahooks";

function Barotropic() {
  const { viewer } = useCesium();

  const [show, setShow] = useState(false);

  const showAnimate = useCallback(() => {
    const { currentTime, stopTime } = viewer.clock;
    const leftTime = Math.floor(
      stopTime.secondsOfDay - currentTime.secondsOfDay
    );

    if (leftTime < 5) {
      setShow(true);
    } else if (show) setShow(false);
  }, [show]);

  useInterval(showAnimate, 100);

  return (
    <Entity
      show={show}
      name="Barotropic"
      position={Cartesian3.fromDegrees(98, 48, 0)}
    >
      <EllipseGraphics
        material={new Color(0.73, 0.94, 0.95, 0.4)}
        semiMinorAxis={300000.0}
        semiMajorAxis={300000.0}
        extrudedHeight={1000000.0}
        rotation={0}
      />
    </Entity>
  );
}

export default Barotropic;
