import { useMap } from "@vis.gl/react-google-maps"
import { useEffect, useState } from "react"

import type { MapType } from "@scandic-hotels/design-system/Map/mapConstants"

export function useZoomControls(mapType: MapType) {
  const map = useMap()
  const [zoomLevel, setZoomLevel] = useState<number>(mapType.DEFAULT_ZOOM)

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

  const zoomOut = () => {
    if (map && zoomLevel > mapType.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 <= mapType.MIN_ZOOM,
    isMaxZoom: zoomLevel >= mapType.MAX_ZOOM,
  }
}