import React from 'react';
import PropTypes from 'prop-types';
import {Marker} from 'react-leaflet';

import PopupElem from './entities-popup';
import getIcon from './icon';

export default function EntitiesMarkerPlus({name,lat,lon}){
    if(lat===undefined || lat===null || lon===undefined || lon===null){
	console.error('lat or lon undefined or null');
	return null;
    }else{
	const markerIcon=getIcon();
	if(markerIcon===null){
	    //TODO Handle issue!
	    console.error('ERROR: icon null');
	    return null;
	}else if(lat===undefined||lat===null){
	    //TODO Handle issue!
	    console.error('ERROR: lat undefined or null');
	    return null;
	}else if(lon===undefined||lon===null){
	    //TODO Handle issue!
	    console.error('ERROR: lon undefined or null');
	    return null;
	}else{
	    return(
	    <>
		<Marker
		    position={[lat,lon]}
		    icon={markerIcon}
		>
		    <PopupElem
			name={name}
			lat={lat}
			lon={lon}
		    />
		</Marker>
	    </>
	);
	}
    }
};
EntitiesMarkerPlus.propTypes = {
    name: PropTypes.string,
    lat: PropTypes.string,
    lon: PropTypes.string
};