import { Marker, Popup } from 'react-leaflet'

import { Trashbox } from '../api/trashbox/types'
import { iconTrash } from '../utils/markerIcons'

type TrashboxMarkersProps = {
    trashboxes: Trashbox[],
    selectTrashbox: ({ index, category }: { index: number, category: string }) => void
}

const TrashboxMarkers = ({ trashboxes, selectTrashbox }: TrashboxMarkersProps) => {
    return (
        <>{trashboxes.map((trashbox, index) => (
            <Marker icon={iconTrash} key={`${trashbox.Lat}${trashbox.Lng}`} position={[trashbox.Lat, trashbox.Lng]}>
                <Popup>
                    <p>{trashbox.Address}</p>
                    <p>Тип мусора: <>
                        {trashbox.Categories.map((category, j) =>
                            <span key={trashbox.Address + category}>
                                <a href='#' onClick={() => selectTrashbox({ index, category })}>
                                    {category}
                                </a>
                                {(j < trashbox.Categories.length - 1) ? ', ' : ''}
                            </span>
                        )}
                    </></p>
                    <p>{trashbox.Lat.toFixed(4)}, {trashbox.Lng.toFixed(4)}</p>
                </Popup>
            </Marker>
        ))}</>
    )
}

export default TrashboxMarkers