// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets } from '@fluentui/react';
import React, { useMemo } from 'react';
import { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';
import { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';
import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
import { _convertPxToRem } from "../../../../acs-ui-common/src";
import { SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
import { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
/**
 * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
 *
 * @private
 */
export const OverflowGallery = (props) => {
    const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, isShort = false, overflowGalleryElements, horizontalGalleryStyles, overflowGalleryPosition = 'horizontalBottom', verticalGalleryStyles, onChildrenPerPageChange, parentWidth } = props;
    const containerStyles = useMemo(() => {
        if (overflowGalleryPosition === 'verticalRight') {
            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
        }
        return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
    }, [shouldFloatLocalVideo, isShort, isNarrow, overflowGalleryPosition]);
    const galleryStyles = useMemo(() => {
        if (overflowGalleryPosition === 'verticalRight') {
            return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
        }
        return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
    }, [isNarrow, isShort, horizontalGalleryStyles, overflowGalleryPosition, verticalGalleryStyles]);
    const scrollableHorizontalGalleryContainerStyles = useMemo(() => {
        if (isNarrow && parentWidth) {
            return {
                width: shouldFloatLocalVideo ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem` : `${_convertPxToRem(parentWidth) - 1}rem`
            };
        }
        return undefined;
    }, [isNarrow, parentWidth, shouldFloatLocalVideo]);
    if (overflowGalleryPosition === 'verticalRight') {
        return React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
    }
    SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM;
    if (isNarrow) {
        // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
        // participant tiles are visible
        onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
        return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery", containerStyles: scrollableHorizontalGalleryContainerStyles });
    }
    return React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
};
//# sourceMappingURL=OverflowGallery.js.map