import React, { useState } from "react";
import { useMap } from "../MapComponent";
import Geolocation from "ol/Geolocation";
import AddRoundedIcon from "@mui/icons-material/AddRounded";
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
import GpsFixedRoundedIcon from "@mui/icons-material/GpsFixedRounded";
import clsx from "clsx";

const INITIAL_ZOOM = 14; // 默认缩放级别

const Zoom: React.FC = () => {
  const map = useMap();
  const [locateDisabled, setLocateDisabled] = useState(false);

  // 放大函数
  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 });
  };

  // 定位功能
  const handleLocate = () => {
    if (!map) return;
    
    const geolocation = new Geolocation({
      trackingOptions: { enableHighAccuracy: true },
      projection: map.getView().getProjection(),
    });

    geolocation.once("change:position", () => {
      const coords = geolocation.getPosition();
      if (coords) {
        map
          .getView()
          .animate({ center: coords, zoom: INITIAL_ZOOM, duration: 500 });
      }
      geolocation.setTracking(false);
    });
    
    geolocation.setTracking(true);
  };

  // 包装 handleLocate，点击后禁用按钮一段时间
  const onLocateClick = () => {
    navigator.geolocation.getCurrentPosition(
      () => {
        handleLocate();
      },
      (error) => {
        console.log(error.message);
        setLocateDisabled(true); // 定位失败后禁用按钮
        // alert("定位失败，将使用默认位置。");
      }
    );
  };

  return (
    <div className="absolute right-4 bottom-8">
      <div className="w-8 h-26 flex flex-col gap-2 items-center">
        <div
          className={clsx(
            "w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black",
            locateDisabled && "text-gray-300"
          )}
        >
          <button
            className="w-6 h-6 flex items-center justify-center rounded-xl  hover:bg-white transition-all duration-100"
            onClick={onLocateClick}
            disabled={locateDisabled}
          >
            <GpsFixedRoundedIcon 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;