next-tjwater-frontend/src/features/map/core/components/zoom.tsx

import type { Map as MapLibreMap } from "maplibre-gl";
import { Home, Minus, Navigation2, Plus, type LucideIcon } from "lucide-react";
import { type ReactNode, type RefObject, useCallback, useEffect, useState } from "react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
import { cn } from "@/shared/ui/cn";
import {
  CAMERA_MODE_ANGLE_TOLERANCE,
  getCombinedCameraAction,
  setThreeDimensionalNavigation
} from "./camera-actions";
import {
  MAP_CONTROL_HOVER_CLASS_NAME,
  mapOptionInteractionVariants,
  MAP_CONTROL_RADIUS_CLASS_NAME,
  MAP_ICON_CELL_RADIUS_CLASS_NAME,
  MAP_CONTROL_SURFACE_CLASS_NAME
} from "./map-control-styles";

type MapZoomProps = {
  mapRef: RefObject<MapLibreMap | null>;
  mapReady: boolean;
  onHome: () => void;
  reducedMotion?: boolean;
  className?: string;
};

export function MapZoom({
  mapRef,
  mapReady,
  onHome,
  reducedMotion = false,
  className = ""
}: MapZoomProps) {
  const [orientation, setOrientation] = useState({ bearing: 0, pitch: 0 });
  const is3d = orientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE;
  const cameraAction = getCombinedCameraAction(orientation.bearing, orientation.pitch);
  useEffect(() => {
    const map = mapRef.current;
    if (!map || !mapReady) return;
    const syncOrientation = () => {
      const nextOrientation = { bearing: map.getBearing(), pitch: map.getPitch() };
      setOrientation(nextOrientation);
      setThreeDimensionalNavigation(map, nextOrientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE);
    };
    syncOrientation();
    map.on("pitch", syncOrientation);
    map.on("rotate", syncOrientation);
    return () => {
      map.off("pitch", syncOrientation);
      map.off("rotate", syncOrientation);
    };
  }, [mapRef, mapReady]);

  const handleCameraMode = useCallback(() => {
    const map = mapRef.current;
    if (!map) return;
    const action = getCombinedCameraAction(map.getBearing(), map.getPitch());
    const duration = reducedMotion ? 0 : 350;

    if (action === "enter-3d") {
      setThreeDimensionalNavigation(map, true);
      map.easeTo({
        pitch: window.matchMedia("(max-width: 639px)").matches ? 45 : 50,
        duration
      });
      return;
    }

    if (action === "reset-north") {
      map.easeTo({ bearing: 0, duration });
      return;
    }

    setThreeDimensionalNavigation(map, false);
    map.easeTo({ pitch: 0, bearing: 0, duration });
  }, [mapRef, reducedMotion]);
  const handleZoomIn = useCallback(() => {
    mapRef.current?.zoomIn({ duration: 260 });
  }, [mapRef]);

  const handleZoomOut = useCallback(() => {
    mapRef.current?.zoomOut({ duration: 260 });
  }, [mapRef]);

  return (
    <TooltipProvider delayDuration={180}>
      <div
        role="group"
        aria-label="地图缩放"
        className={cn("pointer-events-auto flex w-fit flex-col gap-2", className)}
      >
        <div
          className={cn(
            "flex flex-col p-1",
            MAP_CONTROL_RADIUS_CLASS_NAME,
            MAP_CONTROL_SURFACE_CLASS_NAME
          )}
        >
          <ControlButton icon={Plus} label="放大" disabled={!mapReady} onClick={handleZoomIn} />
          <Divider />
          <ControlButton icon={Minus} label="缩小" disabled={!mapReady} onClick={handleZoomOut} />
          <Divider />
          <ControlButton
            content={
              <CompassModeIndicator
                bearing={orientation.bearing}
                pitch={orientation.pitch}
                mode={is3d ? "3D" : "2D"}
              />
            }
            label={
              cameraAction === "reset-north"
                ? "恢复北向"
                : cameraAction === "exit-3d"
                  ? "切换到二维"
                  : "切换到三维"
            }
            pressed={is3d}
            disabled={!mapReady}
            onClick={handleCameraMode}
          />
        </div>

        <div className={cn("p-1", MAP_CONTROL_RADIUS_CLASS_NAME, MAP_CONTROL_SURFACE_CLASS_NAME)}>
          <ControlButton icon={Home} label="缩放到全局" disabled={!mapReady} onClick={onHome} />
        </div>
      </div>
    </TooltipProvider>
  );
}

type ControlButtonProps = {
  icon?: LucideIcon;
  content?: ReactNode;
  pressed?: boolean;
  label: string;
  disabled: boolean;
  onClick: () => void;
};

function ControlButton({
  icon: Icon,
  content,
  pressed,
  label,
  disabled,
  onClick
}: ControlButtonProps) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          type="button"
          aria-label={label}
          aria-pressed={pressed}
          disabled={disabled}
          onClick={onClick}
          className={cn(
            "grid h-10 w-10 place-items-center border border-transparent",
            MAP_ICON_CELL_RADIUS_CLASS_NAME,
            "bg-transparent text-slate-700",
            pressed ? mapOptionInteractionVariants({ state: "selected" }) : MAP_CONTROL_HOVER_CLASS_NAME,
            pressed && "bg-[var(--action-soft)] text-[var(--action-blue-hover)]",
            disabled && "text-[var(--ink-muted)] opacity-45"
          )}
        >
          {Icon ? <Icon size={18} strokeWidth={2.2} aria-hidden="true" /> : content}
        </button>
      </TooltipTrigger>
      <TooltipContent
        side="left"
        sideOffset={8}
        className="border border-[var(--surface-divider)] bg-[var(--surface-reading)] px-2.5 py-1.5 text-xs font-medium text-slate-800 shadow-lg"
      >
        {label}
      </TooltipContent>
    </Tooltip>
  );
}

function CompassModeIndicator({
  bearing,
  pitch,
  mode
}: {
  bearing: number;
  pitch: number;
  mode: "2D" | "3D";
}) {
  return (
    <span
      className="relative grid h-7 w-7 place-items-center"
      style={{ perspective: "70px" }}
      aria-hidden="true"
      data-map-compass="true"
      data-bearing={bearing.toFixed(1)}
      data-pitch={pitch.toFixed(1)}
      data-map-mode={mode.toLowerCase()}
    >
      <Navigation2
        size={17}
        strokeWidth={2.2}
        className="transition-transform duration-150 ease-out motion-reduce:transition-none"
        style={{ transform: `rotateX(${Math.min(pitch, 60) * 0.65}deg) rotateZ(${-bearing}deg)` }}
      />
      <span
        className={cn(
          "absolute -bottom-0.5 -right-0.5 min-w-4 rounded-[4px] px-0.5 text-center text-[8px] font-bold leading-3 tracking-[-0.02em] shadow-xs ring-1",
          mode === "3D"
            ? "bg-[var(--action-blue)] text-white ring-[var(--action-blue)]/30"
            : "bg-[var(--surface-reading)] text-slate-600 ring-[var(--surface-border)]"
        )}
      >
        {mode}
      </span>
    </span>
  );
}

function Divider() {
  return <div className="my-0.5 h-px w-3.5 self-center bg-slate-300/70" aria-hidden="true" />;
}