// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import React, { useRef } from 'react';
import { _useContainerHeight } from './utils/responsive';
import { VerticalGallery } from './VerticalGallery';
import { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
/**
 * Responsive container for the VerticalGallery Component. Performs calculations for number of children
 * for the VerticalGallery
 * @param props
 *
 * @beta
 */
export const ResponsiveVerticalGallery = (props) => {
    var _a;
    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
    const containerRef = useRef(null);
    const containerHeight = _useContainerHeight(containerRef);
    const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
    const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
    let containerHeightWithoutPadding = Math.max((containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding, 0);
    if (Number.isNaN(containerHeightWithoutPadding)) {
        containerHeightWithoutPadding = 0;
    }
    const childrenPerPage = calculateVerticalChildrenPerPage({
        numberOfChildren: (_a = React.Children.count(children)) !== null && _a !== void 0 ? _a : 0,
        containerHeight: containerHeightWithoutPadding,
        gapHeightRem,
        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
        isShort: isShort !== null && isShort !== void 0 ? isShort : false
    });
    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
    return React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children));
};
//# sourceMappingURL=ResponsiveVerticalGallery.js.map