import React, { useCallback, useLayoutEffect, useRef } from 'react';
import ReactResizeDetector from 'react-resize-detector';
import { useSyncedValueHeights } from '../../../contexts/SyncedValueHeightsContext';
export var ValueHeightReporter = function (_a) {
    var uri = _a.uri, children = _a.children;
    var reportHeight = useSyncedValueHeights().reportHeight;
    var contentRef = useRef(null);
    var lastHeightRef = useRef();
    var report = useCallback(function () {
        var _a;
        var height = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
        if (!height || height === lastHeightRef.current)
            return;
        lastHeightRef.current = height;
        reportHeight(uri, height);
    }, [reportHeight, uri, lastHeightRef]);
    useLayoutEffect(function () {
        report();
    }, [report]);
    return (React.createElement("div", { ref: contentRef },
        React.createElement(ReactResizeDetector, { handleHeight: true, onResize: report }),
        children));
};
