import L from 'leaflet'
import React, { FC, useMemo, useRef } from 'react'
import { Marker } from 'react-leaflet'

interface Props {
  value: { lat: number, lng: number }
  onChange: (value: { lat: number, lng: number }) => void
}

export const DraggableMarker: FC<Props> = (props) => {
  const markerRef = useRef<L.Marker>(null)
  const eventHandlers = useMemo(
    () => ({
      dragend() {
        const marker = markerRef.current
        if (marker != null) {
          props.onChange(marker.getLatLng())
        }
      },
    }),
    [],
  )
  return (
    <Marker
      draggable={true}
      eventHandlers={eventHandlers}
      position={props.value}
      ref={markerRef}
      icon={L.icon({
        iconUrl: require('assets/images/marker-icon-2x.png'),
        iconSize: [50/2, 82/2],
        iconAnchor: [50 / 4, 82/2],
      })}
    />
  )
}