import React from "react";
/* eslint-disable react/jsx-no-useless-fragment */
import { useContext, useEffect, useState } from 'react';
import { Control } from 'ol/control';
import MapContext from '../Map/MapContext';
import { createPortal } from 'react-dom';
/**
 * @param {{children: any, position: string, component: any}} props
 * @returns {any}
 */
export const CustomControl = (props) => {
    const { component: Component } = props;
    const { map } = useContext(MapContext);
    const [controlContainer, setControlContainer] = useState(null);
    useEffect(() => {
        if (!map)
            return;
        const controlDiv = document.createElement('div');
        const toolbarControl = new Control({ element: controlDiv });
        map.controls.push(toolbarControl);
        setControlContainer(controlDiv);
        return () => {
            map.controls.remove(toolbarControl);
        };
    }, [map]);
    return React.createElement(React.Fragment, null, controlContainer && createPortal(Component, controlContainer));
};
//# sourceMappingURL=CustomControl.js.map