import { useMemo } from 'react';
import MapWrapper from "./map/MapWrapper";
 
import { Hotline } from 'react-leaflet-hotline';*
import { HotlineEventHandlers } from 'react-leaflet-hotline/dist/types/types'
 
export default function Events() {
 
	// Attach 3 events to the Hotline: click + mouseover + mouseout events 
	const eventHandlers: HotlineEventHandlers = useMemo(
    () => ({
      click: ({ line }) => console.log('clicked on line:', line),
      mouseover: ({ polyline }) => polyline.setStyle({ opacity: 0.5 }),
      mouseout: ({ polyline }) => polyline.setStyle({ opacity: 0 }),
    }),
    [],
  )
 
 
	return (
		<MapWrapper>
			<Hotline
				data={data} 
        getLat={({ point }) => point.lat}
        getLng={({ point }) => point.lng}
        getVal={({ point }) => point.value}
        options={{tolerance: 10}} // thickness of the "event polyline" over the original hotline
        eventHandlers={eventHandlers} />
		</MapWrapper>
	)
}