import {AppleMaps} from '@crumbs/maps'
import {type ComponentProps} from 'react'
import {View} from 'react-native'

import {type Coords} from '@/hooks/use-current-location'
import {atoms as a, type ViewStyleProp} from '@/sprinkles'

type Markers = ComponentProps<typeof AppleMaps.View>['markers']

type MapPreviewProps = {
  center: Coords
  markers: Markers
  zoom: number
  // omit to fill the parent (e.g. a square bento tile)
  height?: number
  showMyLocation?: boolean
  style?: ViewStyleProp
}

// non-interactive embedded map: a rounded, clipped box with a static map fill
export const MapPreview = ({
  center,
  markers,
  zoom,
  height,
  showMyLocation,
  style,
}: MapPreviewProps) => (
  <View
    style={[
      a.overflow_hidden,
      a.rounded_lg,
      height != null ? {height} : a.flex_1,
      style,
    ]}
  >
    <View style={a.flex_1} pointerEvents="none">
      <AppleMaps.View
        style={a.flex_1}
        cameraPosition={{coordinates: center, zoom}}
        markers={markers}
        uiSettings={{myLocationButtonEnabled: false}}
        properties={{
          isMyLocationEnabled: showMyLocation ?? false,
          selectionEnabled: false,
        }}
      />
    </View>
  </View>
)
