import { Entity, PointGraphics, useCesium } from "resium";

function Point({ data, isCurves, pathColor, pathType = "default" }) {
  const { viewer } = useCesium();

  const start = viewer.clock.startTime;
  const stop = viewer.clock.stopTime;

  const pathMaterial =
    pathType === "dash"
      ? new Cesium.PolylineDashMaterialProperty({
          dashLength: 20,
          color: pathColor || new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
        })
      : pathColor || new Cesium.Color(4 / 255, 251 / 255, 253 / 255);

  console.log("pathMaterial :>> ", pathMaterial);

  /**
   * 计算飞行路径
   * 数据坐标
   * {SampledPositionProperty|*}
   */
  function createProperty(source) {
    let property = new Cesium.SampledPositionProperty();
    for (let i = 0; i < source.length; i++) {
      let time = Cesium.JulianDate.addSeconds(
        start,
        source[i].time,
        new Cesium.JulianDate()
      );
      let position = Cesium.Cartesian3.fromDegrees(
        source[i].longitude,
        source[i].latitude,
        source[i].height
      );
      // 添加位置，和时间对应
      property.addSample(time, position);
    }
    return property;
  }

  const property = createProperty(data);

  property.setInterpolationOptions({
    interpolationDegree: isCurves ? 10 : 1,
    interpolationAlgorithm: isCurves
      ? Cesium.LagrangePolynomialApproximation
      : Cesium.LinearApproximation,
  });
  // property.setInterpolationOptions({
  //   interpolationDegree: 1,
  //   interpolationAlgorithm: Cesium.LinearApproximation,
  // });

  return (
    <Entity
      id={"point-4-2"}
      position={property}
      availability={
        new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop,
          }),
        ])
      }
      orientation={new Cesium.VelocityOrientationProperty(property)}
      path={{
        resolution: 1,
        material: pathMaterial,
        // leadTime、trailTime 不设置 path全显示
        leadTime: 0, // 设置为0时 模型通过后显示path
        // trailTime: 0, // 设置为0时 模型通过后隐藏path
        width: 2,
      }}
    >
      <PointGraphics
        show={true}
        color={Cesium.Color.SKYBLUE}
        pixelSize={10}
        outlineColor={Cesium.Color.YELLOW}
        outlineWidth={3}
      />
    </Entity>
  );
}

export default Point;
