import React, { useState, useMemo } from 'react';
import L from 'leaflet';
import { Marker, useMapEvent } from 'react-leaflet';
import ReactDOMServer from "react-dom/server";
import RoomIcon from '@material-ui/icons/esm/Room';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
const defaultWidth = 28;
const defaultHeight = 28;
const initialScale = 1;
const enlargedScale = 1.4;
export const MapMarker = (props) => {
    const { position, iconComponent, highlight = true, onClick, onMouseOver, onMouseOut } = props;
    const DefaultMarkerIcon = () => {
        return React.createElement(FluentIcon, { component: RoomIcon, color: '#FF0000', size: 28, customSize: true });
    };
    const [icon, setIcon] = useState({
        size: [defaultWidth, defaultHeight],
        scale: initialScale,
        selected: false
    });
    const applyHighlight = () => {
        setIcon(prevState => (Object.assign(Object.assign({}, prevState), { scale: enlargedScale, selected: true })));
    };
    const removeHighlight = () => {
        setIcon(prevState => (Object.assign(Object.assign({}, prevState), { scale: initialScale, selected: false })));
    };
    const map = useMapEvent('click', () => {
        removeHighlight();
    });
    const markerIcon = useMemo(() => new L.DivIcon({
        className: 'custom-div-icon',
        html: `<div style="transform: scale(${icon.scale});overflow:visible">${iconComponent ? ReactDOMServer.renderToString(iconComponent) : ReactDOMServer.renderToString(React.createElement(DefaultMarkerIcon, null))}</div>`,
        iconSize: icon.size,
        iconAnchor: [icon.size[0] / 2, icon.size[1]],
        popupAnchor: [0, -(icon.size[1] / 2)]
    }), [icon, iconComponent]);
    return (React.createElement(Marker, Object.assign({ style: {
            cursor: "pointer"
        }, position: position, icon: markerIcon, eventHandlers: {
            click: () => {
                //highlight && !icon.selected && applyHighlight();
                onClick && onClick();
            },
            mouseover: (e) => {
                onMouseOver && onMouseOver();
                e.target.openPopup();
            },
            mouseout: (e) => {
                onMouseOut && onMouseOut();
                e.target.closePopup();
            }
        } }, props)));
};
//# sourceMappingURL=MapMarker.js.map