import StaticMap from "@/components/Maps/StaticMap"
import { getIntl } from "@/i18n"

import MapButton from "./MapButton"

import styles from "./staticMap.module.css"

import type { MapLocation } from "@/types/components/mapLocation"

interface StaticMapProps {
  country?: string
  city?: string
  location: MapLocation
}

// Zoom levels on the static map are always more zoomed in than on the dynamic maps.
// One of the reasons is because of the smaller size of the map. This function
// adjusts the zoom level for the static map based on the default zoom level
// of the location and whether the location is a country or a city.
function getZoomLevel(defaultZoom: number | undefined, isCountry: boolean) {
  if (defaultZoom) {
    return isCountry ? defaultZoom - 3 : defaultZoom - 1
  }

  return isCountry ? 4 : 10
}

export default async function DestinationStaticMap({
  country,
  city,
  location,
}: StaticMapProps) {
  const intl = await getIntl()
  const altText = city
    ? intl.formatMessage({
        defaultMessage: "Map of the city",
      })
    : intl.formatMessage({
        defaultMessage: "Map of the country",
      })
  const coordinates = location
    ? { lat: location.latitude, lng: location.longitude }
    : undefined

  return (
    <div className={styles.mapWrapper}>
      <StaticMap
        country={country}
        city={city}
        coordinates={coordinates}
        width={320}
        height={200}
        zoomLevel={getZoomLevel(location?.default_zoom, !!country)}
        altText={altText}
      />
      <MapButton className={styles.button} />
    </div>
  )
}
