// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import React, { useRef } from 'react';
import { HorizontalGallery } from './HorizontalGallery';
import { _useContainerWidth } from './utils/responsive';
import { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';
/**
 * Wrapped HorizontalGallery that adjusts the number of items per page based on the
 * available width obtained from a ResizeObserver, width per child, gap width, and button width
 */
export const ResponsiveHorizontalGallery = (props) => {
    const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;
    const containerRef = useRef(null);
    const containerWidth = _useContainerWidth(containerRef);
    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
    let containerWidthWithoutPadding = Math.max((containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding, 0);
    if (Number.isNaN(containerWidthWithoutPadding)) {
        containerWidthWithoutPadding = 0;
    }
    const childrenPerPage = calculateHorizontalChildrenPerPage({
        numberOfChildren: React.Children.count(props.children),
        containerWidth: containerWidthWithoutPadding,
        gapWidthRem,
        buttonWidthRem
    });
    onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
    return React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children));
};
//# sourceMappingURL=ResponsiveHorizontalGallery.js.map