import {
  Cartographic,
  Math,
  ScreenSpaceEventHandler,
  ScreenSpaceEventType,
} from "cesium";
import { useState } from "react";
import { useCesium } from "resium";

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

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

  if (!lon && !lat) return <></>;

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

export default Picker;
