import { useState } from "react";
import { useCesium } from "resium";

let handler;

function Picker() {
  const { viewer } = useCesium();
  const { scene } = viewer;
  const [lon, setLon] = useState(0);
  const [lat, setLat] = useState(0);

  // Mouse over the globe to see the cartographic position
  handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction(function (movement) {
    const cartesian = viewer.camera.pickEllipsoid(
      movement.endPosition,
      scene.globe.ellipsoid
    );
    if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitudeString = Cesium.Math.toDegrees(
        cartographic.longitude
      ).toFixed(4);
      const latitudeString = Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(4);
      setLon(longitudeString);
      setLat(latitudeString);
    } else {
      //   entity.label.show = false;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  return (
    <div
      className="picker"
      style={{ color: "white", position: "absolute", top: 0, right: 0 }}
    >
      <p style={{ fontFamily: "cursive" }}>
        经度：{lon}°；纬度：{lat}°；
      </p>
    </div>
  );
}

export default Picker;
