import { env } from "@/env/server"
import { getDestinationsMapData } from "@/lib/trpc/memoizedRequests"

import DynamicMap from "../../Map/DynamicMap"
import MapContent from "../../Map/MapContent"
import MapProvider from "../../Map/MapProvider"
import { getHotelMapMarkers, mapMarkerDataToGeoJson } from "../../Map/utils"
import ActiveMapCard from "./ActiveMapCard"

export default async function OverviewMapContainer() {
  const hotelData = await getDestinationsMapData()

  if (!hotelData) {
    return null
  }

  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID

  const markers = getHotelMapMarkers(hotelData)
  const geoJson = mapMarkerDataToGeoJson(markers)

  return (
    <MapProvider apiKey={googleMapsApiKey} pageType="overview">
      <DynamicMap
        mapId={googleMapId}
        markers={markers}
        fitBounds
        boundsPadding={0}
        gestureHandling="cooperative"
      >
        <MapContent geojson={geoJson} />
        <ActiveMapCard markers={markers} />
      </DynamicMap>
    </MapProvider>
  )
}
