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