import { Box, Page, Table } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { CollectionToolbar } from '../CollectionToolbar';
import { CollectionToolbarsProvider } from './CollectionToolbarsProvider';
import { ToolbarAndTitlebarContainer } from './ToolbarAndTitlebarContainer';
import { useIsMobile } from '../../hooks/useIsMobile';
import { CollectionToolbarsVisualization, } from './CollectionToolbarsVisualization';
import { useIsCollectionToolbarExists } from '../CollectionToolbar/useIsCollectionToolbarExists';
function BorderRadiusTopCard({ children }) {
    const isMobile = useIsMobile();
    return (React.createElement(Box, { direction: "vertical", backgroundColor: "D80", borderTopLeftRadius: isMobile ? 0 : 8, borderTopRightRadius: isMobile ? 0 : 8 }, children));
}
function BorderRadiusTopBottomCard({ children }) {
    const isMobile = useIsMobile();
    return (React.createElement(Box, { direction: "vertical", backgroundColor: "D80", borderRadius: isMobile ? 0 : 8 }, children));
}
function _CollectionToolbars(props) {
    const { sticky, state, selectionToolbar, extraToolbar, summaryBar, topNotification: topNotificationProp, titleBar, visualization: customSlot, } = props;
    const { collection, featuredComponents, hasSubToolbarComponents, shouldDisplayFiltersTags, bulk: { selectedIds }, internalScroll, container: { isPanelLayout }, } = state;
    const isMobile = useIsMobile();
    const topNotification = isPanelLayout
        ? undefined
        : typeof topNotificationProp === 'function'
            ? topNotificationProp()
            : topNotificationProp;
    const AppliedFiltersTagList = featuredComponents.appliedFiltersTagList.value
        ?.component;
    const { showRefreshLoader } = collection;
    const shouldDisplaySubToolbar = shouldDisplayFiltersTags && hasSubToolbarComponents;
    const shouldRenderCollectionToolbar = useIsCollectionToolbarExists(props);
    const toolbars = (React.createElement(React.Fragment, null,
        selectionToolbar && !showRefreshLoader && selectedIds.length > 0 ? (selectionToolbar) : (React.createElement(React.Fragment, null,
            extraToolbar,
            (!isMobile || shouldRenderCollectionToolbar) && (React.createElement(CollectionToolbar, { ...props, dataHook: "collection-toolbar" })))),
        shouldDisplaySubToolbar && (React.createElement(Box, { direction: "vertical", backgroundColor: "D80" },
            React.createElement(Table.SubToolbar, { dataHook: "collection-table-sub-toolbar" }, AppliedFiltersTagList && shouldDisplayFiltersTags && (React.createElement(AppliedFiltersTagList, null))))),
        summaryBar,
        topNotification));
    /* wrapping with Card is WSR way to make the sticky table header not to add extra border between the header and the content https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--table#Sticky_Toolbar_&_Sub-toolbar*/
    const child = (React.createElement(ToolbarAndTitlebarContainer, { state: state.toolbar }, customSlot ? (React.createElement(React.Fragment, null,
        React.createElement(BorderRadiusTopBottomCard, null, toolbars),
        React.createElement(CollectionToolbarsVisualization, { state: state, visualization: customSlot }),
        React.createElement(BorderRadiusTopCard, null, titleBar))) : (React.createElement(BorderRadiusTopCard, null,
        toolbars,
        titleBar))));
    return (React.createElement(CollectionToolbarsProvider, null, sticky && !internalScroll ? (React.createElement(Page.Sticky, { style: isMobile ? { top: 78 } : undefined }, child)) : (child)));
}
export const CollectionToolbars = observer(_CollectionToolbars);
//# sourceMappingURL=CollectionToolbars.js.map