import { useCallback } from "react";
import { Entity, ModelGraphics, useCesium } from "resium";
import arrowRound from "@/assets/arrow_round.glb";
import { CallbackProperty, Cartesian3, Color, ColorBlendMode } from "cesium";

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

const height = 1000000;

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

  // 自转
  // 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 = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
      1
    );
    return _time;
  }, [viewer]);

  const anticycloneColor = Color.fromCssColorString("#f70000");
  const cycloneColor = Color.fromCssColorString("#00AC4D");

  const cycloneList = [
    {
      type: "anticyclone",
      showTime: 5,
      position: Cartesian3.fromDegrees(-62, 69, height),
    },
    {
      type: "cyclone",
      showTime: 7.5,
      position: Cartesian3.fromDegrees(-45, 59, height),
    },
    {
      type: "anticyclone",
      showTime: 10,
      position: Cartesian3.fromDegrees(-20, 55, height),
    },
    {
      type: "cyclone",
      showTime: 12.5,
      position: Cartesian3.fromDegrees(5, 53, height),
    },
    {
      type: "anticyclone",
      showTime: 15,
      position: Cartesian3.fromDegrees(29, 49, height),
    },
    {
      type: "cyclone",
      showTime: 17.5,
      position: Cartesian3.fromDegrees(46, 46, height),
    },
    {
      type: "anticyclone",
      showTime: 20,
      position: Cartesian3.fromDegrees(62, 45, height),
    },
    {
      type: "cyclone",
      showTime: 22.5,
      position: Cartesian3.fromDegrees(81, 46.5, height),
    },
    {
      type: "anticyclone",
      showTime: 25,
      position: Cartesian3.fromDegrees(98, 48, height),
    },
    {
      type: "anticyclone",
      showTime: 25,
      position: Cartesian3.fromDegrees(98, 48, 0),
    },
  ];

  return cycloneList.map((cyclone, index) => {
    const { type, showTime, position } = cyclone;
    return (
      <Entity
        key={`${type}-${index}`}
        id={`${type}-${index}`}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < showTime) return;
            return position;
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={type === "anticyclone" ? anticycloneColor : cycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
    );
  });

  //     <ModelGraphics
  //       uri={arrowRound}
  //       minimumPixelSize={128}
  //       // nodeTransformations={{
  //       //   自转
  //       //   group_0: new Cesium.NodeTransformationProperty({
  //       //     rotation: rotationProperty,
  //       //   }),
  //       // }}
  //       color={anticycloneColor}
  //       colorBlendMode={ColorBlendMode.REPLACE}
  //     />
}

export default Cyclone;
