import React from 'react'
import { MapViewAuto } from '../Map/MapViewAuto'
import type { CollectionPlace } from '@trek/shared'
import { mappablePlaces } from '../../pages/collections/collectionsModel'
import { useTileUrl } from '../../hooks/useTileUrl'
import { OFM_DARK, OFM_POSITRON } from '../../constants/mapDefaults'

interface CollectionMapProps {
  places: CollectionPlace[]
  selectedPlaceId: number | null
  onOpenPlace: (id: number) => void
  /** Clicking the map background clears the selection. */
  onDeselect?: () => void
  dark: boolean
}

/**
 * Map view — reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
 * clustering). One of the three list views; clicking a marker selects the place.
 * The parent `.col-mapwrap` supplies the rounded, bordered box + height, so this
 * just fills it.
 */
export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
  const pts = mappablePlaces(places)
  const tileUrl = useTileUrl(dark ? OFM_DARK : OFM_POSITRON)

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <MapViewAuto
        places={pts}
        selectedPlaceId={selectedPlaceId}
        // Hover was off here, so a wall of round photos gave no way to tell what any of
        // them were without clicking. The trip map has said what a marker is all along;
        // this one adds the rating, because "which of these did I like" is exactly the
        // question a small picture cannot answer.
        onMarkerClick={onOpenPlace}
        onMapClick={onDeselect ? () => onDeselect() : undefined}
        // No center/zoom: the map frames itself on the collection's places at mount, and
        // falls back to the world view for a collection with none.
        tileUrl={tileUrl}
        fitKey={pts.length}
      />
    </div>
  )
}