import { MAX_MAP_ZOOM, MIN_MAP_ZOOM, clampMapZoom } from "../../lib/locationMapUtils";

export default function LocationMapToolbar({
  mode,
  editorTool,
  hasAnyMap,
  canManage,
  saving,
  zoom,
  setZoom,
  onFit,
  onView,
  onEdit,
  onPanMode,
  onEditObjects,
}) {
  const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
  const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;

  return (
    <section className="location-map-toolbar" aria-label="Map controls">
      <div className="location-map-mode-group">
        <div className="location-map-mode-buttons" aria-label="Map mode">
          <button
            type="button"
            className={mode === "view" ? "active" : ""}
            disabled={saving || !hasAnyMap}
            onClick={onView}
            aria-pressed={mode === "view"}
          >
            View
          </button>
          {canManage ? (
            <button
              type="button"
              className={mode === "edit" ? "active" : ""}
              disabled={saving || !hasAnyMap}
              onClick={onEdit}
              aria-pressed={mode === "edit"}
              aria-label="Edit Draft"
            >
              <span className="location-map-label-full">Edit Draft</span>
              <span className="location-map-label-short">Edit</span>
            </button>
          ) : null}
        </div>
        {mode === "edit" && canManage ? (
          <div className="location-map-tool-buttons" aria-label="Edit tool">
            <button
              type="button"
              className={editorTool === "pan" ? "active is-pan" : ""}
              onClick={onPanMode}
              disabled={saving}
              aria-pressed={editorTool === "pan"}
            >
              Pan Mode
            </button>
            <button
              type="button"
              className={editorTool === "edit" ? "active is-edit" : ""}
              onClick={onEditObjects}
              disabled={saving}
              aria-pressed={editorTool === "edit"}
            >
              Edit Objects
            </button>
          </div>
        ) : null}
      </div>

      <div className="location-map-zoom-controls" aria-label="Zoom controls">
        <button
          type="button"
          onClick={() => setZoom((value) => Number(clampMapZoom(value - 0.15).toFixed(2)))}
          disabled={!hasAnyMap || isAtMinZoom}
          aria-label="Zoom out"
        >
          -
        </button>
        <span>{Math.round(zoom * 100)}%</span>
        <button
          type="button"
          onClick={() => setZoom((value) => Number(clampMapZoom(value + 0.15).toFixed(2)))}
          disabled={!hasAnyMap || isAtMaxZoom}
          aria-label="Zoom in"
        >
          +
        </button>
        <button type="button" onClick={onFit} disabled={!hasAnyMap}>
          Fit
        </button>
      </div>
    </section>
  );
}