import React, { cloneElement, Fragment } from 'react';
import { HorizontalAvailableSpaceBox } from '../Responsive/HorizontalAvailableSpaceBox';
import { ToolbarItem } from '../ToolbarItem/ToolbarItem';
import { HorizontalOverflowBox } from '../Responsive/HorizontalOverflowBox';
import { ToolbarGroupScrollWidthBox } from './ToolbarGroupScrollWidthBox';
import { SearchOrCustomFilter } from './SearchOrCustomFilter';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { InitialLoadingConditional } from '../InitialLoadingConditional';
import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
export function CollectionToolbarActionsGroupResponsiveLayout(props) {
    const { state, left, viewsToolbarItem, filtersElement, MoreFiltersButton, multiLevelSorting, customColumns, exportButton, search, showCustomColumnsOnTheLeft, } = props;
    const toolbarState = useToolbarCollectionContext();
    const { toolbar: { responsive }, } = toolbarState;
    let child = (React.createElement(Fragment, null,
        left ? (React.createElement(React.Fragment, null,
            viewsToolbarItem && (React.createElement(InitialLoadingConditional, { state: toolbarState, loadingElement: React.createElement(CollectionToolbarSkeletonItem, { dataHook: "toolbar-views-skeleton", width: "100px" }) }, viewsToolbarItem)),
            filtersElement)) : viewsToolbarItem ? (filtersElement) : undefined,
        MoreFiltersButton && (React.createElement(ToolbarGroupScrollWidthBox, { state: responsive.filters, gap: "SP2" },
            React.createElement(MoreFiltersButton, null))),
        React.createElement(ToolbarGroupScrollWidthBox, { state: responsive.actions, gap: "SP2" },
            customColumns && showCustomColumnsOnTheLeft && customColumns,
            multiLevelSorting,
            exportButton &&
                cloneElement(exportButton, {
                    toolbarType: 'default',
                }),
            customColumns && !showCustomColumnsOnTheLeft && customColumns),
        search && React.createElement(SearchOrCustomFilter, { state: state, search: search })));
    child = (React.createElement(HorizontalOverflowBox, { state: responsive.overflow, gap: "SP2" }, child));
    child = React.createElement(ToolbarItem, null, child);
    child = (React.createElement(HorizontalAvailableSpaceBox, { state: responsive.actionsAvailableSpace }, child));
    return child;
}
//# sourceMappingURL=CollectionToolbarActionsGroupResponsiveLayout.js.map