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

let handler;

function Picker() {
  const { viewer } = useCesium();
  const { scene } = viewer;

  // 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(2);
      const latitudeString = Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(2);
      // console.log("longitudeString, :>> ", longitudeString, latitudeString);
      //   entity.position = cartesian;
      //   entity.label.show = true;
      //   entity.label.text =
      //     `Lon: ${`   ${longitudeString}`.slice(-7)}\u00B0` +
      //     `\nLat: ${`   ${latitudeString}`.slice(-7)}\u00B0`;
    } else {
      //   entity.label.show = false;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  return (
    <Entity>
      <LabelGraphics
        show={false}
        showBackground={true}
        font={"14px monospace"}
        horizontalOrigin={Cesium.HorizontalOrigin.LEFT}
        verticalOrigin={Cesium.VerticalOrigin.TOP}
        pixelOffset={new Cesium.Cartesian2(15, 0)}
      />
    </Entity>
  );
}

export default Picker;
