import React, { cloneElement, useEffect, useMemo, useState, } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, TableToolbar } from '@wix/design-system';
import { CollectionProvider } from '../CollectionContext';
import { assertComponentType } from '../assertComponentType';
import { ToolbarItemBox } from '../ToolbarItemBox';
import { classes, st } from './CollectionToolbar.st.css.js';
import { InitialLoadingConditional } from '../InitialLoadingConditional';
import { useCollectionToolbarSyncedProps } from './useCollectionToolbarSyncedProps';
import { useIsCollectionToolbarExists } from './useIsCollectionToolbarExists';
import { CollectionToolbarActionsToolbarItemsGroup } from './CollectionToolbarActionsToolbarItemsGroup';
import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
import { MoreActions } from '../MoreActions';
import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
import { useIsMobile } from '../../hooks/useIsMobile';
import { isValidElement } from '../isValidElement';
import { CollectionSearch } from '../CollectionSearch';
function _CollectionToolbar(props) {
    const { state, search = true, title, tabs, customColumns, multiLevelSorting, views, dataHook, filters: filtersProp, tableGridSwitchButton, exportButton, dragAndDropReorderModeToolbar, primaryActionButton, secondaryActions, moreActions, } = props;
    const isMobile = useIsMobile();
    const hasOtherToolbarFeatures = useIsCollectionToolbarExists(props, {
        excludeSearch: true,
        isMobile,
    });
    const searchIsExpandable = isMobile ? hasOtherToolbarFeatures : undefined;
    assertComponentType(primaryActionButton, 'PrimaryActionButton', 'PrimaryActionButton');
    const { collection, featuredComponents, toolbar: { responsive }, container: { isPanelLayout }, } = state;
    const addDataHookToMoreActions = () => {
        return (React.createElement(MoreActions, { dataHook: "toolbar-more-actions", ...moreActions.props }));
    };
    const searchElement = isPanelLayout ? undefined : isValidElement(search) ? (cloneElement(search, {
        expandable: searchIsExpandable ??
            search.props.expandable,
    })) : search ? (React.createElement(CollectionSearch, { size: "small", expandable: searchIsExpandable })) : (search);
    const MoreFiltersButton = featuredComponents.moreFiltersButton
        .value;
    const viewsToolbarItem = isPanelLayout
        ? undefined
        : views && (React.createElement(ToolbarItemBox, { dataHook: "collection-table-toolbar-views-item" }, views));
    const CollectionToolbarFilters = state.tagsCollectionState?.components.CollectionToolbarFilters ||
        state.collectionDataExtension?.components.CollectionToolbarFilters;
    const filtersElement = useMemo(() => {
        if (!state.container.initTask.status.isSuccess) {
            return;
        }
        if (isMobile) {
            return undefined;
        }
        if (filtersProp) {
            return filtersProp;
        }
        const featureFilters = [
            ...(state.collectionDataExtension?.buildCustomFieldFilters() || []),
            state.tagsCollectionState?.buildTagsFilterWrapper(),
        ].filter(Boolean);
        return (filtersProp ??
            (CollectionToolbarFilters && (React.createElement(CollectionToolbarFilters, { inline: 0 }, featureFilters))));
    }, [filtersProp, isMobile, state.container.initTask.status]);
    let left;
    if (tabs) {
        left = (React.createElement(ToolbarItemBox, { removeStartPadding: true, expandable: true, layout: "button" }, tabs));
    }
    else if (title && !isMobile) {
        left = title;
    }
    useCollectionToolbarSyncedProps({
        left,
        filtersElement,
        viewsToolbarItem,
        state,
    });
    /* checking if something is rendered in the .left TableToolbar.ItemGroup (not empty) */
    const [rendersStart, setRendersStart] = useState();
    useEffect(() => {
        setRendersStart(!!left ||
            !!viewsToolbarItem ||
            (state.toolbarFiltersState?.totalInlineFilters.value !== undefined &&
                state.toolbarFiltersState?.totalInlineFilters.value !== null &&
                state.toolbarFiltersState?.totalInlineFilters.value > 0));
    }, [left, viewsToolbarItem, state.toolbarFiltersStateInitialized]);
    const shouldAddDivider = tableGridSwitchButton && (searchElement || MoreFiltersButton);
    const analyticsCustomColumnsDiscoverability = state.container.experiments?.get('specs.analytics.CustomColumnsWithLabelAndNewIcon');
    const showCustomColumnsOnTheLeft = analyticsCustomColumnsDiscoverability === 'b' ||
        analyticsCustomColumnsDiscoverability === 'c';
    const immidiatelyInteractWithToolbarsEnabled = state.container.internalExperiments?.enabled('specs.cairo.ImmidiatelyInteractWithToolbars');
    const CollectionToolbarActionsGroup = isMobile || responsive.responsiveDisabled
        ? CollectionToolbarActionsToolbarItemsGroup
        : CollectionToolbarActionsGroupResponsiveLayout;
    const toolbarElement = (React.createElement(React.Fragment, null,
        React.createElement(TableToolbar.ItemGroup, { position: "start", className: st(classes.left, { expandable: !!tabs }), dataHook: "collection-table-toolbar-filters" }, left ?? (React.createElement(React.Fragment, null,
            viewsToolbarItem && (React.createElement(InitialLoadingConditional, { state: state, loadingElement: React.createElement(CollectionToolbarSkeletonItem, { dataHook: "toolbar-views-skeleton", width: "100px" }) }, viewsToolbarItem)),
            !viewsToolbarItem ? filtersElement : undefined))),
        React.createElement(TableToolbar.ItemGroup, { position: isMobile ? undefined : 'end', className: st(classes.right, {}, ...[rendersStart ? undefined : classes.fullWidth]) },
            React.createElement(CollectionToolbarActionsGroup, { state: state, viewsToolbarItem: viewsToolbarItem, filtersElement: filtersElement, MoreFiltersButton: MoreFiltersButton, multiLevelSorting: multiLevelSorting, customColumns: isMobile || isPanelLayout ? undefined : customColumns, exportButton: exportButton, search: searchElement, showCustomColumnsOnTheLeft: showCustomColumnsOnTheLeft, left: left }),
            primaryActionButton && (React.createElement(TableToolbar.Item, null, primaryActionButton)),
            moreActions && (React.createElement(TableToolbar.Item, null, addDataHookToMoreActions())),
            secondaryActions && (React.createElement(TableToolbar.Item, null, secondaryActions)),
            shouldAddDivider && (React.createElement(Box, { alignSelf: "stretch", paddingLeft: "SP2" },
                React.createElement(Divider, { direction: "vertical", dataHook: "collection-table--grid-switch--divider" }))),
            tableGridSwitchButton && (React.createElement(TableToolbar.Item, null, tableGridSwitchButton)))));
    const toolbarWithSkeleton = (React.createElement(InitialLoadingConditional, { state: state, loadingElement: React.createElement(CollectionToolbarSkeletonItem, { dataHook: "toolbar-skeleton", width: "100px" }), hideLoadingElement: immidiatelyInteractWithToolbarsEnabled }, toolbarElement));
    return (React.createElement(CollectionProvider, { value: collection },
        React.createElement(Box, { direction: "vertical", dataHook: dataHook },
            React.createElement(Box, { minHeight: isPanelLayout ? '48px' : title?.props.subtitle ? '78px' : '60px' }, state.isReorderModeToolbarVisible ? (dragAndDropReorderModeToolbar) : (React.createElement(TableToolbar, { removeVerticalPadding: true, className: st(classes.root, {
                    views: !responsive.responsiveDisabled,
                    mobile: isMobile,
                }), dataHook: "collection-table-toolbar" }, toolbarWithSkeleton))))));
}
export const CollectionToolbar = observer(_CollectionToolbar);
//# sourceMappingURL=CollectionToolbar.js.map