import { useCallback, useState } from "react";
import {
  Entity,
  LabelGraphics,
  EllipseGraphics,
  useCesium,
  CylinderGraphics,
} from "resium";
import { Color, Cartesian3, LabelStyle } from "cesium";
import { useInterval } from "ahooks";

// const material = Cesium.Material.fromType("Custom", {
//   fabric: Cesium.Color.RED.withAlpha(0.5),
//   shader: `
//       czm_material input;
//       czm_material output;

//       void main() {
//           output = input;
//           output.alpha = sin(input.st) * 0.5 + 0.5; //给圆柱体添加从上到下的动画效果
//       }`,
//   uniforms: {
//     input: function (czm, frameNumber, time, context) {
//       var u = Cesium.getUniform(context, "u");
//       return Cesium.Color.fromAlpha(czm.color, u);
//     },
//   },
// });

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

  const [show, setShow] = useState(false);

  const showAnimate = useCallback(() => {
    const { currentTime, stopTime } = viewer.clock;
    const leftTime = Math.floor(
      stopTime.secondsOfDay - currentTime.secondsOfDay
    );

    if (leftTime <= 10) {
      setShow(true);
    } else if (show) setShow(false);
  }, [show]);

  useInterval(showAnimate, 1000);

  return (
    <Entity
      show={show}
      name="EllipseGraphics"
      description="EllipseGraphics!!"
      position={Cartesian3.fromDegrees(88, 60, 0)}
    >
      <EllipseGraphics
        material={new Color(0.73, 0.94, 0.95, 0.4)}
        semiMinorAxis={150000.0}
        semiMajorAxis={150000.0}
        extrudedHeight={1000000.0}
        rotation={0}
        // outline
      />
      <LabelGraphics
        position={Cartesian3.fromDegrees(88, 60, 0)}
        text={"barotropic"}
        font="24px Helvetica"
        fillColor={Color.SKYBLUE}
        outlineColor={Color.BLACK}
        outlineWidth={2}
        style={LabelStyle.FILL_AND_OUTLINE}
        eyeOffset={new Cesium.Cartesian2(0, 500000)}
      />
    </Entity>
  );
}

export default Barotropic;