// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Stack, mergeStyles } from '@fluentui/react';
import React, { useEffect, useRef } from 'react';
import { useDraggable } from 'react-use-draggable-scroll';
import { scrollableHorizontalGalleryContainerStyles, scrollableHorizontalGalleryStyles } from './styles/ScrollableHorizontalGallery.style';
/**
 * Component to display elements horizontally in a scrollable container
 * @private
 */
export const ScrollableHorizontalGallery = (props) => {
    const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;
    useEffect(() => {
        const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
        if (onFetchTilesToRender && indexesArray) {
            onFetchTilesToRender(indexesArray !== null && indexesArray !== void 0 ? indexesArray : []);
        }
    }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
    const ref = useRef();
    const { events: dragabbleEvents } = useDraggable(ref);
    return React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: {
                childrenGap: '0.5rem'
            } }, horizontalGalleryElements));
};
//# sourceMappingURL=ScrollableHorizontalGallery.js.map