webapp/app/composables/useClusteredNodes.ts

import { GetClusteredNodesDocument } from './graphql/public/geo-generated'
import type { ClusterPointType } from './graphql/public/geo-generated'

export interface MapBounds {
  west: number
  south: number
  east: number
  north: number
  zoom: number
}

export function useClusteredNodes(transportType?: Ref<string | undefined>) {
  const { $geoClient } = useNuxtApp()

  const clusteredNodes = ref<ClusterPointType[]>([])
  const loading = ref(false)

  const fetchClusters = async (bounds: MapBounds) => {
    loading.value = true
    try {
      const { data } = await $geoClient.query({
        query: GetClusteredNodesDocument,
        variables: {
          west: bounds.west,
          south: bounds.south,
          east: bounds.east,
          north: bounds.north,
          zoom: Math.floor(bounds.zoom),
          transportType: transportType?.value
        },
        fetchPolicy: 'network-only'
      })

      clusteredNodes.value = (data?.clusteredNodes ?? []).filter(Boolean) as ClusterPointType[]
    } catch (error) {
      console.error('Failed to fetch clustered nodes:', error)
      clusteredNodes.value = []
    } finally {
      loading.value = false
    }
  }

  return {
    clusteredNodes,
    loading,
    fetchClusters
  }
}