"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResponsiveContainer = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
/**
 * Responsive Container component
 * {@docCategory ResponsiveContainer}
 */
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 = (0, react_1.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, _b, _c, _d, _e, _f;
            var commonStyles = {
                root: tslib_1.__assign(tslib_1.__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), { width: '100%', height: '100%' }),
                chartWrapper: tslib_1.__assign(tslib_1.__assign({}, (_b = child.props.styles) === null || _b === void 0 ? void 0 : _b.chartWrapper), { width: '100%' }),
                chart: tslib_1.__assign(tslib_1.__assign({}, (_c = child.props.styles) === null || _c === void 0 ? void 0 : _c.chart), { 
                    // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.
                    // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.
                    width: '100%' }),
            };
            return React.cloneElement(child, {
                width: calculatedWidth,
                height: calculatedHeight,
                // For SankeyChart
                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
                styles: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, child.props.styles), commonStyles), { 
                    // For HeatMapChart
                    subComponentStyles: tslib_1.__assign(tslib_1.__assign({}, (_d = child.props.styles) === null || _d === void 0 ? void 0 : _d.subComponentStyles), { cartesianStyles: tslib_1.__assign(tslib_1.__assign({}, (_f = (_e = child.props.styles) === null || _e === void 0 ? void 0 : _e.subComponentStyles) === null || _f === void 0 ? void 0 : _f.cartesianStyles), commonStyles) }) }),
            });
        });
    }, [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));
};
exports.ResponsiveContainer = ResponsiveContainer;
//# sourceMappingURL=ResponsiveContainer.js.map