import { __assign } from "tslib";
import * as React from 'react';
import { getWindow } from '@fluentui/react';
/**
 * Responsive Container component
 * {@docCategory ResponsiveContainer}
 */
export var ResponsiveContainer = function (props) {
    var _a, _b;
    var containerRef = React.useRef(null);
    var onResizeRef = React.useRef();
    var _c = React.useState({}), size = _c[0], setSize = _c[1];
    onResizeRef.current = props.onResize;
    React.useEffect(function () {
        var _window = getWindow(containerRef.current);
        var animationFrameId;
        var resizeObserver;
        var resizeCallback = function (entries) {
            var _a;
            var _b = entries[0].contentRect, containerWidth = _b.width, containerHeight = _b.height;
            // rAF is an alternative to the throttle function. For more info, see:
            // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
            animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(function () {
                setSize(function (prevSize) {
                    var roundedWidth = Math.floor(containerWidth);
                    var roundedHeight = Math.floor(containerHeight);
                    if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
                        return prevSize;
                    }
                    return { containerWidth: roundedWidth, containerHeight: roundedHeight };
                });
            });
            (_a = onResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onResizeRef, containerWidth, containerHeight);
        };
        if (_window && _window.ResizeObserver) {
            resizeObserver = new _window.ResizeObserver(resizeCallback);
            if (containerRef.current) {
                resizeObserver.observe(containerRef.current);
            }
        }
        return function () {
            if (animationFrameId) {
                _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
            }
            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
        };
    }, []);
    var chartContent = React.useMemo(function () {
        var calculatedWidth = size.containerWidth;
        var calculatedHeight = size.containerHeight;
        if (typeof props.aspect === 'number' && props.aspect > 0) {
            if (calculatedWidth) {
                calculatedHeight = calculatedWidth / props.aspect;
            }
            else if (calculatedHeight) {
                calculatedWidth = calculatedHeight * props.aspect;
            }
            if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {
                calculatedHeight = props.maxHeight;
            }
        }
        return React.Children.map(props.children, function (child) {
            var _a;
            return React.cloneElement(child, {
                width: calculatedWidth,
                height: calculatedHeight,
                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
                styles: __assign(__assign({}, child.props.styles), { root: __assign(__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), { 
                        // Ensure the child element fills the parent container
                        // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
                        width: calculatedWidth, height: calculatedHeight }) }),
            });
        });
    }, [size, props.aspect, props.maxHeight, props.children]);
    return (React.createElement("div", { ref: containerRef, style: {
            width: (_a = props.width) !== null && _a !== void 0 ? _a : '100%',
            height: (_b = props.height) !== null && _b !== void 0 ? _b : '100%',
            minWidth: props.minWidth,
            minHeight: props.minHeight,
            maxHeight: props.maxHeight,
        } }, chartContent));
};
//# sourceMappingURL=ResponsiveContainer.js.map