"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var resize_observer_polyfill_1 = tslib_1.__importDefault(require("resize-observer-polyfill"));
var ig_utilities_1 = require("@intelligentgraphics/ig.utilities");
exports.useElementBounds = function (element) {
    var _a = tslib_1.__read(React.useState(undefined), 2), bounds = _a[0], setBounds = _a[1];
    React.useEffect(function () {
        var node = element.current;
        if (ig_utilities_1.isNullOrUndefined(node)) {
            return;
        }
        var updateBounds = function () { return setBounds(node.getBoundingClientRect()); };
        var observer = new resize_observer_polyfill_1.default(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 = exports.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";
exports.default = ResizeObserver;
