import { Fragment, useCallback } from "react";
import { Entity, ModelGraphics, useCesium } from "resium";
import { useParams } from "react-router-dom";
import arrowRound from "@/assets/arrow_round.glb";

let totalSeconds = 60;
let numberOfSamples = 120;
let wheelAngle = 0;

function Cyclone() {
  const { viewer } = useCesium();
  const { type } = useParams();

  if (type !== "1") return <></>;

  // const position = new Cesium.SampledPositionProperty();

  // const velocityVectorProperty = new Cesium.VelocityVectorProperty(
  //   position,
  //   false
  // );
  // const velocityVector = new Cesium.Cartesian3();
  // const wheelAngleProperty = new Cesium.SampledProperty(Number);

  // for (let index = 0; index < numberOfSamples; index++) {
  //   const factor = index / numberOfSamples;
  //   const time = Cesium.JulianDate.addSeconds(
  //     startTime,
  //     factor * totalSeconds,
  //     new Cesium.JulianDate()
  //   );
  //   velocityVectorProperty.getValue(time, velocityVector);
  //   wheelAngle -= 3;
  //   wheelAngleProperty.addSample(time, wheelAngle);
  // }
  // const rotationProperty = new Cesium.CallbackProperty(function (time, result) {
  //   return Cesium.Quaternion.fromAxisAngle(
  //     Cesium.Cartesian3.UNIT_Z,
  //     wheelAngleProperty.getValue(time) || wheelAngleProperty._values[0],
  //     result
  //   );
  // }, false);

  const getPassTime = useCallback(() => {
    const { startTime, currentTime } = viewer.clock;
    const _time = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay);
    return _time;
  }, [viewer]);

  return (
    <Fragment>
      <Entity
        id={"Anticyclone-1"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 10) return;
            return Cesium.Cartesian3.fromDegrees(-55, 58, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={64}
          // nodeTransformations={{
          //   group_0: new Cesium.NodeTransformationProperty({
          //     rotation: rotationProperty,
          //   }),
          // }}
        />
      </Entity>
      <Entity
        id={"Cyclone-1"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 20) return;
            return Cesium.Cartesian3.fromDegrees(-32, 72.2, 1000000);
          }, true)
        }
      >
        <ModelGraphics uri={arrowRound} minimumPixelSize={64} />
      </Entity>
      <Entity
        id={"Anticyclone-2"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 30) return;
            return Cesium.Cartesian3.fromDegrees(20, 77, 1000000);
          }, true)
        }
      >
        <ModelGraphics uri={arrowRound} minimumPixelSize={64} />
      </Entity>
      <Entity
        id={"Cyclone-2"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 40) return;
            return Cesium.Cartesian3.fromDegrees(63, 69.9, 1000000);
          }, true)
        }
      >
        <ModelGraphics uri={arrowRound} minimumPixelSize={64} />
      </Entity>
      <Entity
        id={"Anticyclone-3"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 50) return;
            return Cesium.Cartesian3.fromDegrees(88, 60, 1000000);
          }, true)
        }
      >
        <ModelGraphics uri={arrowRound} minimumPixelSize={64} />
      </Entity>
      <Entity
        id={"Anticyclone-4"}
        position={
          new Cesium.CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 50) return;
            return Cesium.Cartesian3.fromDegrees(88, 60, 0);
          }, true)
        }
      >
        <ModelGraphics uri={arrowRound} minimumPixelSize={64} />
      </Entity>
    </Fragment>
  );
}

export default Cyclone;
