import React from "react";
import { useMap } from "../MapComponent";
import AddRoundedIcon from "@mui/icons-material/AddRounded";
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
import FitScreenIcon from "@mui/icons-material/FitScreen";
import { config } from "@config/config";

const Zoom: React.FC = () => {
  const map = useMap();

  // 放大函数
  const handleZoomIn = () => {
    if (!map) return;
    const view = map.getView();
    view.animate({ zoom: (view.getZoom() ?? 0) + 1, duration: 200 });
  };

  // 缩小函数
  const handleZoomOut = () => {
    if (!map) return;
    const view = map.getView();
    view.animate({ zoom: (view.getZoom() ?? 0) - 1, duration: 200 });
  };

  // 缩放到全局 Extent
  const handleFitScreen = () => {
    if (!map) return;
    const view = map.getView();
    view.fit(config.MAP_EXTENT, { duration: 500 });
  };

  return (
    <div className="absolute right-4 bottom-8 z-1300">
      <div className="w-8 h-26 flex flex-col gap-2 items-center">
        <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
          <button
            className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
            onClick={handleFitScreen}
          >
            <FitScreenIcon fontSize="small" />
          </button>
        </div>
        <div className="w-8 h-16 flex flex-col items-center justify-center bg-gray-50 rounded-xl drop-shadow-xl shadow-black">
          <button
            className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
            onClick={handleZoomIn}
            aria-label="放大"
          >
            <AddRoundedIcon />
          </button>
          <div className="m-0.5 border-t-1 border-gray-300 w-6"></div>
          <button
            className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
            onClick={handleZoomOut}
            aria-label="缩小"
          >
            <RemoveRoundedIcon />
          </button>
        </div>
      </div>
    </div>
  );
};

export default Zoom;