'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ResponsiveContainer", {
    enumerable: true,
    get: function() {
        return ResponsiveContainer;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _getWindow = require("../../utilities/getWindow");
const _useResponsiveChildStylesstyles = require("./useResponsiveChildStyles.styles");
const _react1 = require("@griffel/react");
const ResponsiveContainer = (props)=>{
    const containerRef = _react.useRef(null);
    const onResizeRef = _react.useRef(undefined);
    const childClasses = (0, _useResponsiveChildStylesstyles.useResponsiveChildStyles)();
    const [size, setSize] = _react.useState({});
    // eslint-disable-next-line react-hooks/refs
    onResizeRef.current = props.onResize;
    _react.useEffect(()=>{
        const _window = (0, _getWindow.getWindow)(containerRef.current);
        let animationFrameId;
        let resizeObserver;
        const resizeCallback = (entries)=>{
            var _onResizeRef_current;
            const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
            // 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(()=>{
                // eslint-disable-next-line react-hooks/set-state-in-effect
                setSize((prevSize)=>{
                    const roundedWidth = Math.floor(containerWidth);
                    const roundedHeight = Math.floor(containerHeight);
                    if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
                        return prevSize;
                    }
                    return {
                        containerWidth: roundedWidth,
                        containerHeight: roundedHeight
                    };
                });
            });
            (_onResizeRef_current = onResizeRef.current) === null || _onResizeRef_current === void 0 ? void 0 : _onResizeRef_current.call(onResizeRef, containerWidth, containerHeight);
        };
        if (_window && _window.ResizeObserver) {
            resizeObserver = new _window.ResizeObserver(resizeCallback);
            if (containerRef.current) {
                resizeObserver.observe(containerRef.current);
            }
        }
        return ()=>{
            if (animationFrameId) {
                _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
            }
            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
        };
    }, []);
    const chartContent = _react.useMemo(()=>{
        let calculatedWidth = size.containerWidth;
        let 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, (child)=>{
            var _child_props_styles, _child_props_styles1, _child_props_styles2;
            return /*#__PURE__*/ _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: {
                    root: (0, _react1.mergeClasses)((_child_props_styles = child.props.styles) === null || _child_props_styles === void 0 ? void 0 : _child_props_styles.root, childClasses.root),
                    chartWrapper: (0, _react1.mergeClasses)((_child_props_styles1 = child.props.styles) === null || _child_props_styles1 === void 0 ? void 0 : _child_props_styles1.chartWrapper, childClasses.chartWrapper),
                    chart: (0, _react1.mergeClasses)((_child_props_styles2 = child.props.styles) === null || _child_props_styles2 === void 0 ? void 0 : _child_props_styles2.chart, childClasses.chart)
                }
            });
        });
    }, [
        size,
        props.aspect,
        props.maxHeight,
        props.children
    ]);
    var _props_width, _props_height;
    return /*#__PURE__*/ _react.createElement("div", {
        ref: containerRef,
        style: {
            width: (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : '100%',
            height: (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : '100%',
            minWidth: props.minWidth,
            minHeight: props.minHeight,
            maxHeight: props.maxHeight
        }
    }, chartContent);
};
ResponsiveContainer.displayName = 'ResponsiveContainer';
