import { Box, Table as WSRTable, } from '@wix/design-system';
import React, { useCallback, } from 'react';
import { observer } from 'mobx-react-lite';
import { cairoCtaClicked } from '@wix/bex-core/bi';
import { CollectionProvider } from '../CollectionContext';
import { classes, st } from '../common.st.css.js';
import { CollectionToolbars } from '../CollectionToolbars/CollectionToolbars';
import { BorderOnlyBox } from '../BorderOnlyBox';
import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
import { useIsMobile } from '../../hooks/useIsMobile';
import { buildMobileColumns } from './buildMobileColumns';
function _CollectionTableWSRTable(props) {
    const { state, filters, title, tabs, customColumns: customColumnsProp, multiLevelSorting: multiLevelSortingProp, views, extraToolbar, summaryBar, topNotification, selectionToolbar, dragAndDropReorderModeToolbar, showSelection: showSelectionProp, exportButton, tags, sticky, onRowClick, search, children, tableGridSwitchButton, useShowLoaderWhenEmpty, dragAndDrop, showTitleBar, horizontalScroll, stickyColumns, stickySelectionColumn, hideBulkSelectionCheckbox, columns, primaryActionButton, secondaryActions, onSelectionChanged, moreActions, visualization, } = props;
    const isMobile = useIsMobile();
    const { toolbar, showEmptyState, tableState: table, keyedItems: stateKeyedItems, } = state;
    const { internalExperiments, isPanelLayout } = useWixPatternsContainer();
    const isGreyHeadersEnabled = internalExperiments?.enabled('specs.cairo.tableGreyHeaders');
    const { bulk, initTask } = toolbar;
    const keyedItems = props.keyedItems ?? stateKeyedItems;
    const { collection } = table;
    const { showRefreshLoader, showErrorState } = collection;
    const { stackingRootRef } = usePageContext();
    const handleRowCLick = useCallback((item, index) => {
        state.toolbar.reportBi(cairoCtaClicked({
            ctaName: 'row_area',
            ctaIndex: index,
            itemId: item.id,
            itemIndex: item.index,
            url: typeof window !== 'undefined' ? window.location.href : '',
        }));
        onRowClick?.(item, index);
    }, [onRowClick]);
    const Table = WSRTable;
    const showSelection = showSelectionProp ?? selectionToolbar != null;
    const hideTitleBar = isMobile ||
        showEmptyState ||
        toolbar.showInitialLoader ||
        initTask.status.isError;
    const showBorderBox = !isPanelLayout &&
        (!table.showLoadingState || !showTitleBar) &&
        (hideTitleBar || !showTitleBar);
    const actionCellColumn = columns.find((column) => column.key === 'cairo-action-cell');
    const columnsWithoutActionCell = columns.filter((column) => column.key !== 'cairo-action-cell');
    const tableColumns = isMobile
        ? [
            ...buildMobileColumns(columnsWithoutActionCell),
            ...(actionCellColumn ? [actionCellColumn] : []),
        ]
        : columns;
    const keyedItemsWithTooltip = keyedItems.map((item) => {
        const isDisabled = bulk.isRowCheckboxDisabled(item);
        if (isDisabled) {
            const tooltipContent = bulk.getCheckboxTooltipContent(item);
            if (tooltipContent) {
                return {
                    ...item,
                    checkboxTooltipContent: tooltipContent,
                };
            }
        }
        return item;
    });
    return (React.createElement("div", { "data-hook": "collection-table", className: st(classes.fullHeight, classes.column) },
        React.createElement(Table, { ...props, skin: isGreyHeadersEnabled ? 'neutral' : props.skin, withWrapper: false, data: keyedItemsWithTooltip, viewportRef: stackingRootRef, columns: tableColumns, onRowClick: onRowClick ? handleRowCLick : undefined, 
            // this forces WSR <Table/> to render the loader even when `data.length=0`
            showHeaderWhenEmpty: useShowLoaderWhenEmpty &&
                !showRefreshLoader &&
                !showErrorState &&
                !showEmptyState, hideBulkSelectionCheckbox: selectionToolbar ? false : hideBulkSelectionCheckbox, bulkSelectionCheckboxRef: bulk.bulkSelectionCheckboxRef, dragAndDrop: dragAndDrop, rowDataHook: (rowData) => `table-row-${rowData.key}`, controlled: true, horizontalScroll: horizontalScroll, stickyColumns: table.getStickyColumnsCount({
                horizontalScroll,
                stickyColumns,
                showSelection,
                stickySelectionColumn,
            }), showSelection: showSelection, selectedIds: bulk.selectedIds, onSelectionStarted: state.toolbar.onSelectionStarted, onSelectionChanged: onSelectionChanged ??
                ((_selectedIds, _change) => {
                    state.toolbar.onSelectionChanged(_selectedIds, _change);
                }) },
            React.createElement(CollectionToolbars, { sticky: sticky, state: toolbar, search: search, customColumns: customColumnsProp, multiLevelSorting: multiLevelSortingProp, views: views, title: title, tabs: tabs, filters: filters, selectionToolbar: selectionToolbar, dragAndDropReorderModeToolbar: dragAndDropReorderModeToolbar, extraToolbar: extraToolbar, summaryBar: summaryBar, topNotification: typeof topNotification === 'function'
                    ? () => topNotification({ query: collection.result.originQuery })
                    : topNotification, titleBar: React.createElement(React.Fragment, null,
                    showBorderBox && React.createElement(BorderOnlyBox, null),
                    !hideTitleBar && (React.createElement("div", { "data-hook": "titlebar-a11y-wrapper", style: { display: showTitleBar ? undefined : 'none' } },
                        React.createElement(WSRTable.Titlebar, null)))), tableGridSwitchButton: tableGridSwitchButton, exportButton: exportButton, tags: tags, primaryActionButton: primaryActionButton, secondaryActions: secondaryActions, moreActions: moreActions, visualization: visualization }),
            React.createElement(CollectionProvider, { value: collection },
                React.createElement(Box, { width: "100%", direction: "vertical", minHeight: 0, flex: 1, verticalAlign: "middle" }, children)))));
}
export const CollectionTableWSRTable = observer(_CollectionTableWSRTable);
//# sourceMappingURL=CollectionTableWSRTable.js.map