import React, { useEffect, useRef, useContext} from 'react';
import * as maptalks from 'maptalks'
import {mapContext} from "../context/MapcontextComponent";
import {IMapProps} from "../interfaces/mapInterfaces";

const MapComponent = ({children, mapOptions, className, getMap} : IMapProps) => {

    let mapContainerEl = useRef(null);
    const {map, setMap} = useContext(mapContext)

    useEffect(() => {
        if (map && map.options){
            mapOptions && map.setOptions(mapOptions)
        }else {
            if(mapOptions){
                let mapInstance = new maptalks.Map('mapContainer', mapOptions!)
                mapOptions && setMap(mapInstance)
                getMap && getMap(mapInstance)
            }
        }
        return(()=>{
               map && map.id && map.remove()
        })
    }, [mapOptions])

    return (
            <>
                <div id = "mapContainer" ref = {mapContainerEl} className={className}></div>
                {children}
            </>
    );
};

export default MapComponent;