import React, { useRef, useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core';
import './Map.css';
import MapContext from './MapContext';
import * as ol from 'ol';
import { DragRotateAndZoom, defaults as defaultInteractions } from 'ol/interaction';
const useStyles = makeStyles((theme) => ({
    root: {
        minWidth: 600,
        height: '85vh'
    }
}));
const Map = ({ children, zoom, projection }) => {
    const classes = useStyles();
    const mapRef = useRef();
    const [map, setMap] = useState(null);
    const center = [-73.975535, 40.691783];
    // on component mount
    useEffect(() => {
        const options = {
            view: new ol.View({ zoom, center, projection }),
            interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
            layers: [],
            controls: [],
            overlays: []
        };
        const mapObject = new ol.Map(options);
        mapObject.setTarget(mapRef.current);
        setMap(mapObject);
        return () => mapObject.setTarget(undefined);
    }, []);
    // zoom change handler
    useEffect(() => {
        if (!map)
            return;
        map.getView().setZoom(zoom);
    }, [zoom]);
    // center change handler
    useEffect(() => {
        if (!map)
            return;
        map.getView().setCenter(center);
    }, [center]);
    useEffect(() => {
        if (!map)
            return;
        map.getview().getprojection(projection);
    }, [projection]);
    return (React.createElement(MapContext.Provider, { value: { map } }, React.createElement("div", { ref: mapRef, className: classes.root }, children)));
};
export default Map;
//# sourceMappingURL=Map.js.map