import { Entity, PolylineGraphics, useCesium } from "resium";
import { Cartesian3 } from "cesium";
import { min } from "lodash-es";

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

  return (
    <Entity
      id={"Updraft"}
      position={Cartesian3.fromDegrees(-34.0707383, 60.7117244, 100)}
    >
      <PolylineGraphics
        positions={
          new Cesium.CallbackProperty(function (time, result) {
            const { currentTime, startTime } = viewer.clock;
            const passTime = currentTime.secondsOfDay - startTime.secondsOfDay;
            const height = 100000 * passTime;
            return Cesium.Cartesian3.fromDegreesArrayHeights(
              [-62, 69, 0, -62, 69, min([height, 1000000])],
              Cesium.Ellipsoid.WGS84,
              result
            );
          }, false)
        }
        width={30}
        material={new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)}
      />
    </Entity>
  );
}

export default Updraft;