import { __read } from "tslib";
import * as React from "react";
import Observer from "resize-observer-polyfill";
import { isNullOrUndefined } from "@intelligentgraphics/ig.utilities";
export var useElementBounds = function (element) {
    var _a = __read(React.useState(undefined), 2), bounds = _a[0], setBounds = _a[1];
    React.useEffect(function () {
        var node = element.current;
        if (isNullOrUndefined(node)) {
            return;
        }
        var updateBounds = function () { return setBounds(node.getBoundingClientRect()); };
        var observer = new Observer(updateBounds);
        observer.observe(node);
        updateBounds();
        return function () {
            observer.unobserve(node);
            observer.disconnect();
        };
    }, [element]);
    return bounds;
};
var ResizeObserver = function (props) {
    var htmlRef = React.useRef(null);
    var bounds = useElementBounds(htmlRef);
    React.useEffect(function () {
        if (bounds !== undefined && props.onResize !== undefined) {
            props.onResize(bounds);
        }
    }, [bounds]);
    var childProps = React.useMemo(function () { return ({
        bounds: bounds,
        htmlRef: htmlRef,
    }); }, [bounds, htmlRef]);
    return props.children(childProps);
};
ResizeObserver.displayName = "ResizeObserver";
export default ResizeObserver;
