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

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

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 = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay);
    return _time;
  }, [viewer]);

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

  return (
    <Fragment>
      <Entity
        id={"Anticyclone-1"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 5) return;
            return Cartesian3.fromDegrees(-62, 69, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          // nodeTransformations={{
          //   自转
          //   group_0: new Cesium.NodeTransformationProperty({
          //     rotation: rotationProperty,
          //   }),
          // }}
          color={anticycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
        <LabelGraphics
          position={Cartesian3.fromDegrees(98, 48, 0)}
          text={"Anticyclone"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity
        id={"Cyclone-1"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 10) return;
            return Cartesian3.fromDegrees(-20, 55, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={cycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
      <Entity
        id={"Anticyclone-2"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 15) return;
            return Cartesian3.fromDegrees(29, 49, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={anticycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
      <Entity
        id={"Cyclone-2"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 20) return;
            return Cartesian3.fromDegrees(62, 45, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={cycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
      <Entity
        id={"Anticyclone-3"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 25) return;
            return Cartesian3.fromDegrees(98, 48, 1000000);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={anticycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
      <Entity
        id={"Anticyclone-4"}
        position={
          new CallbackProperty(function (time, result) {
            const passTime = getPassTime();
            if (passTime < 25) return;
            return Cartesian3.fromDegrees(98, 48, 0);
          }, true)
        }
      >
        <ModelGraphics
          uri={arrowRound}
          minimumPixelSize={128}
          color={anticycloneColor}
          colorBlendMode={ColorBlendMode.REPLACE}
        />
      </Entity>
    </Fragment>
  );
}

export default Cyclone;