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

function PlateauPolygon() {
  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 < 10) {
      setShow(true);
    } else if (show) setShow(false);
  }, [show]);

  useInterval(showAnimate, 100);

  return (
    <Entity id="plateau" show={show}>
      <PolygonGraphics
        hierarchy={Cartesian3.fromDegreesArray([
          // 85, 30, 91, 30, 91, 35, 85, 35,
          80, 31, 84, 29.5, 87.4, 28, 91, 28, 98, 29, 94, 35, 79, 34.4, 80, 31,
        ])}
        material={new Color(1, 0, 0, 0.1)}
      />
    </Entity>
  );
}

export default PlateauPolygon;