web/packages/design-system/lib/components/Map/InteractiveMap/useZoomControls.ts

import { useMap } from '@vis.gl/react-google-maps'
import { useEffect, useState } from 'react'
import { DEFAULT_ZOOM, MAX_ZOOM, MIN_ZOOM } from '../mapConstants'

export function useZoomControls() {
  const map = useMap()
  const [zoomLevel, setZoomLevel] = useState(DEFAULT_ZOOM)

  const zoomIn = () => {
    if (map && zoomLevel < MAX_ZOOM) {
      map.setZoom(zoomLevel + 1)
    }
  }

  const zoomOut = () => {
    if (map && zoomLevel > MIN_ZOOM) {
      map.setZoom(zoomLevel - 1)
    }
  }

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

    const handleZoomChanged = () => {
      const currentZoom = map.getZoom()
      if (currentZoom != null) {
        setZoomLevel(currentZoom)
      }
    }

    const listener = map.addListener('zoom_changed', handleZoomChanged)
    return () => listener.remove()
  }, [map])

  return {
    zoomLevel,
    zoomIn,
    zoomOut,
    isMinZoom: zoomLevel <= MIN_ZOOM,
    isMaxZoom: zoomLevel >= MAX_ZOOM,
  }
}