import React, { useEffect, useState } from "react";
import { useMap } from "../MapComponent";

const Scale: React.FC = () => {
  const map = useMap();
  const [zoomLevel, setZoomLevel] = useState(0);
  const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);

  useEffect(() => {
    if (!map) return;

    const updateZoomLevel = () => {
      const zoom = map.getView().getZoom();
      setZoomLevel(zoom ?? 0); // 如果 zoom 是 undefined，则使用默认值 0
    };

    const updateCoordinates = (event: any) => {
      const coords = event.coordinate;
      const transformedCoords = coords.map((c: number) =>
        parseFloat(c.toFixed(4))
      );
      setCoordinates(transformedCoords);
    };

    map.on("moveend", updateZoomLevel);
    map.on("pointermove", updateCoordinates);

    // Initialize values
    updateZoomLevel();

    return () => {
      map.un("moveend", updateZoomLevel);
      map.un("pointermove", updateCoordinates);
    };
  }, [map]);

  return (
    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm z-1300">
      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
      <div className="px-1">
        坐标: {coordinates[0]}, {coordinates[1]}
      </div>
    </div>
  );
};

export default Scale;