import { Fragment } from "react";
import { Entity, EllipseGraphics } from "resium";
import wave from "@/assets/wave.png";

function WavePoint({
  stationLon,
  stationLat,
  value = 360,
  deviationR = 5000,
  eachInterval = 1500,
  maxR = 3600 * 100,
}) {
  const data = {
    stationLon, //经度
    stationLat, //纬度
    value, //传感器的大小
    deviationR, //差值 差值也大 速度越快
    eachInterval, //两个圈的时间间隔
    imageUrl: wave,
    maxR,
  };

  var r1 = 0,
    r2 = 0;
  var r3 = 0,
    r4 = 0;
  function changeOne() {
    r1 = r1 + data.deviationR;
    if (r1 >= data.maxR) {
      r1 = 0;
    }
    return r1;
  }
  function changeR2() {
    r2 = r2 + data.deviationR;
    if (r2 >= data.maxR) {
      r2 = 0;
    }
    return r2;
  }

  const point1 = (
    <Entity
      id={`wave-point-1-${stationLon}-${stationLat}`}
      position={Cesium.Cartesian3.fromDegrees(
        data.stationLon,
        data.stationLat,
        0
      )}
      show={true}
    >
      <EllipseGraphics
        semiMinorAxis={new Cesium.CallbackProperty(changeOne, false)}
        semiMajorAxis={new Cesium.CallbackProperty(changeR2, false)}
        height={10}
        material={
          new Cesium.ImageMaterialProperty({
            image: data.imageUrl,
            repeat: Cesium.Cartesian2(1.0, 1.0),
            transparent: true,
            color: new Cesium.CallbackProperty(function () {
              var alp = 1 - r1 / data.maxR;
              return Cesium.Color.WHITE.withAlpha(alp);
            }, false),
          })
        }
      />
    </Entity>
  );

  let point2;

  //第二个圆开始跑
  setTimeout(function () {
    function changeTwo() {
      r3 = r3 + data.deviationR;
      if (r3 >= data.maxR) {
        r3 = 0;
      }
      return r3;
    }
    function changeR12() {
      r4 = r4 + data.deviationR;
      if (r4 >= data.maxR) {
        r4 = 0;
      }
      return r4;
    }
    point2 = (
      <Entity
        position={Cesium.Cartesian3.fromDegrees(
          data.stationLon,
          data.stationLat,
          0
        )}
        show={true}
        id={`wave-point-2-${stationLon}-${stationLat}`}
      >
        <EllipseGraphics
          semiMinorAxis={new Cesium.CallbackProperty(changeTwo, false)}
          semiMajorAxis={new Cesium.CallbackProperty(changeR12, false)}
          height={10}
          material={
            new Cesium.ImageMaterialProperty({
              image: data.imageUrl,
              repeat: Cesium.Cartesian2(1.0, 1.0),
              transparent: true,
              color: new Cesium.CallbackProperty(function () {
                var alp = 1 - r1 / data.maxR;
                return Cesium.Color.WHITE.withAlpha(alp);
                //entity的颜色透明 并不影响材质，并且 entity也会透明
              }, false),
            })
          }
        />
      </Entity>
    );
  }, data.eachInterval);

  return (
    <Fragment>
      {point1}
      {point2}
    </Fragment>
  );
}

export default WavePoint;