import React, { Component } from 'react';
import { Marker, /*Popup, */Tooltip, withLeaflet } from "react-leaflet";
import { Icon } from 'leaflet';

class MoveableMarker extends Component{
    createInfo(data){
        let infos = [];
        for (let i = 0; i < data.length; i++) { 
            const element = data[i];
            if(element !== ','){
                infos.push(<span>{element}</span>);
            }else{
                infos.push(<br/>);
            }
        }
        return infos;
    }

    render(){
        return <>
            <Marker position={[this.props.data.lat, this.props.data.lng] } icon={new Icon({
                // iconUrl: window.EDITOR_URL + "img/move.png",
                iconUrl: window.EDITOR_URL + this.props.data.src,
                iconSize: [20,20],
                iconAnchor: [10,10]
            })} name={`${this.props.data.reader_name}-${this.props.data.reader_id}`} key={this.props.key}>
                {this.props.data.info &&
                    <Tooltip>
                        { this.createInfo(this.props.data.info) }
                    </Tooltip>
                }
                {/* <Popup>
                    <span>{}</span>
                    <button onClick={() => {console.log(`marker-${this.props.data.id}`)}}>点击</button>
                </Popup> */}
            </Marker>;
        </>
    }
}

export default withLeaflet(MoveableMarker);