import { Entity, PolylineGraphics, useCesium } from "resium";
import {
  CallbackProperty,
  Cartesian3,
  Color,
  Ellipsoid,
  PolylineArrowMaterialProperty,
} 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 CallbackProperty(function (time, result) {
            const { currentTime, startTime } = viewer.clock;
            const passTime = currentTime.secondsOfDay - startTime.secondsOfDay;
            const height = 200000 * passTime;
            return Cartesian3.fromDegreesArrayHeights(
              [-62, 69, 0, -62, 69, min([height, 1000000])],
              Ellipsoid.WGS84,
              result
            );
          }, false)
        }
        width={30}
        material={new PolylineArrowMaterialProperty(Color.RED)}
      />
    </Entity>
  );
}

export default Updraft;
