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

function MoistureTransport() {
  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 (
    <Fragment>
      <Entity show={show}>
        <PolylineGraphics
          positions={Cartesian3.fromDegreesArrayHeights([
            85, 33, 200000, 87, 32, 0,
          ])}
          width={15}
          material={
            new PolylineArrowMaterialProperty(
              Color.fromCssColorString("#70ad47")
            )
          }
        />
      </Entity>
      <Entity show={show}>
        <PolylineGraphics
          positions={Cartesian3.fromDegreesArrayHeights([83, 27, 0, 87, 31, 0])}
          width={15}
          material={
            new PolylineArrowMaterialProperty(
              Color.fromCssColorString("#70ad47")
            )
          }
        />
      </Entity>
    </Fragment>
  );
}

export default MoistureTransport;
