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