import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import {  withLeaflet } from 'react-leaflet';
import MoveableMarker from '../common/MoveableMarker';

/**
 * MoveableObject layer allows to show 
 */
class MoveableObjectLayer extends Component {
	state = {
		markers: []
	}

	componentDidMount(){
		PubSub.subscribe('body.data.got', (msg, data) => {
			let els = [];
			for (let i = 0; i < data.length; i++) {
				let element = <MoveableMarker 
					data={data[i]} 
					key={data[i].card}
				></MoveableMarker>
				els.push(element)
			}
			this.setState({markers: els});
			// console.log("MoveableObjectLayer", this.state.markers);
		});
	}

	componentWillUnmount(){
		PubSub.unsubscribe('body.data.got');
	}

	render() {
		return (
			<>
				{ this.state.markers }
			</>
		);
	}
}
export default withLeaflet(MoveableObjectLayer);
