import { Table } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { CollectionCard } from '../CollectionCard';
import { useTableCollectionSyncProps } from './useTableCollectionSyncProps';
import { CollectionTableWSRTable, } from './CollectionTableWSRTable';
import { CollectionTableContent } from './CollectionTableContent';
import { PageInfiniteScrollLoader } from '../PageInfiniteScrollLoader';
import { useActionCellColumn } from '../ActionCell';
import { SingleCollectionBulkActionModal, SingleCollectionBulkActionToolbar, } from '../BulkAction';
import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
import { useScrollableContentContext } from '../../providers';
import { isValidElement } from '../isValidElement';
import { st, classes } from './CollectionTable.st.css.js';
import { useIsMobile } from '../../hooks/useIsMobile';
import { useCollectionTableResize } from '../../hooks/useCollectionTableResize';
import { SearchableCollectionContent } from '../SearchableCollectionContent/SearchableCollectionContent';
function _CollectionTable(props) {
    const { state: tableState, filters, title, tabs, customColumns: customColumnsProp, multiLevelSorting: multiLevelSortingProp, dataExtension, tags, views, extraToolbar, bulkActionToolbar, exportButton, exportModal, bulkActionModal, sticky: stickyProp, actionCell, actionCellWidth, actionCellProps, columns: columnsProp, onRowClick, onSortClick, showSelection: showSelectionProp, search, renderError, errorState = renderError &&
        ((err, { isOnline, retry }) => renderError?.({
            err,
            isOnline,
            retry,
        })), emptyState, noResultsState, children, onSelectedItems, cardProps, minCardHeight, dataHook, topNotification, tableGridSwitchButton, useShowLoaderWhenEmpty, useNewInfiniteScrollLoader, dragAndDrop, dragAndDropBulkSubmit, dragAndDropSubmit, dragAndDropCancel, dragAndDropReorderModeToolbar, horizontalScroll: horizontalScrollProp, stickyColumns, stickySelectionColumn, hideBulkSelectionCheckbox, maxSelection, showTitleBar = !tableState.toolbar.container.isPanelLayout, BodyElementType, isApplyColumnWidthStyle, rowVerticalPadding, keyedItems, resizeProps, ...rest } = props;
    const dataExtensionType = isValidElement(dataExtension)
        ? dataExtension.type
        : dataExtension;
    const state = tableState.toolbar;
    const horizontalScroll = horizontalScrollProp ??
        state.container.internalExperiments?.enabled('specs.cairo.HorizontalScrollAsDefault');
    const { scrollableContentRef } = useScrollableContentContext();
    const sticky = stickyProp ?? scrollableContentRef?.current != null;
    const customColumns = props.customColumns ||
        (dataExtensionType && React.createElement(dataExtensionType.CustomColumns, null));
    const isMobile = useIsMobile();
    const showSelection = isMobile
        ? bulkActionToolbar != null
        : showSelectionProp ?? bulkActionToolbar != null;
    const isVirtualized = !!BodyElementType;
    useTableCollectionSyncProps({
        ...props,
        dataExtension,
        showSelection,
        customColumns,
        tags,
        isUsingTableVirtualization: isVirtualized,
    });
    const { collection, internalScroll } = state;
    const { selectedOrderedColumnsOrAll } = state;
    const { bulkSelect, query } = collection;
    const { isResizable, tableResizeProps, resizePlaceholderColumn } = useCollectionTableResize({
        columns: columnsProp,
        userResizeProps: resizeProps,
        horizontalScroll,
        columnSizesState: state.columnSizesState,
        isVirtualized,
    });
    const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
    const transformedColumns = selectedOrderedColumnsOrAll.map((column, index, { length }) => {
        const { render, id, sortable, infoTooltipProps, title, width, style, ...restColumn } = column;
        const columnBase = createWSRColumnBase(column, index, length);
        const resizeProps = isResizable ? { id: column.id } : undefined;
        return {
            ...restColumn,
            ...columnBase,
            resizeProps,
            ...(isApplyColumnWidthStyle ? undefined : { style, width }),
            sortDescending: sortable && id ? query.sort.getIsSortDescending(id) : undefined,
            render: (keyedItem, rowNum) => {
                const renderedContent = render(keyedItem.item, rowNum);
                return column.searchable ? (React.createElement(SearchableCollectionContent, null, renderedContent)) : (renderedContent);
            },
        };
    });
    const actionCellColumn = useActionCellColumn({
        actionCellProps: {
            ...(actionCellProps ?? {}),
            stickyActionCell: horizontalScroll || actionCellProps?.stickyActionCell,
        },
        actionCellWidth,
        collection,
        sticky,
        actionCell,
    });
    if (isResizable) {
        transformedColumns.push(resizePlaceholderColumn);
    }
    const columnsWithActions = actionCellColumn
        ? [...transformedColumns, actionCellColumn]
        : transformedColumns;
    const internalOnSortClick = (col, index) => {
        onSortClick?.(col, index);
        if (col.id != null) {
            state.collection.sort({ id: col.id, sortMode: col.sortMode }, {
                clearResult: true,
                multiple: multiLevelSortingProp !== undefined,
            });
        }
    };
    const { st: tableRowSt, classes: tableRowClasses } = Table.dataTableRowStyle;
    let table = (React.createElement(CollectionTableWSRTable, { rowClass: st(classes.root, { mobile: isMobile }), ...props, topNotification: typeof topNotification === 'function'
            ? () => topNotification({ query: collection.result.originQuery })
            : topNotification, customColumns: customColumns, rowVerticalPadding: isMobile ? 'medium' : rowVerticalPadding, dragAndDropReorderModeToolbar: dragAndDropReorderModeToolbar, selectionToolbar: bulkActionToolbar && (React.createElement(SingleCollectionBulkActionToolbar, { state: state, bulkActionToolbar: bulkActionToolbar })), dynamicRowClass: () => tableRowSt(tableRowClasses.root, {
            skin: 'light',
        }), horizontalScroll: horizontalScroll, resizable: isResizable, resizeProps: tableResizeProps, minCardHeight: minCardHeight, sticky: sticky, showTitleBar: showTitleBar, state: tableState, columns: columnsWithActions, onSortClick: internalOnSortClick, showSelection: showSelection, onSelectionChanged: (_selectedIds, _change) => {
            state.onSelectionChanged(_selectedIds, _change);
            onSelectedItems?.(bulkSelect.allSelected, bulkSelect.selectedValues);
            rest.onSelectionChanged?.(_selectedIds, _change);
        }, selectionDisabled: (row) => state.bulk.isRowCheckboxDisabled(row), onRowClick: onRowClick && (({ item }, index) => onRowClick(item, index)), isApplyColumnWidthStyle: isApplyColumnWidthStyle, keyedItems: keyedItems },
        React.createElement(TablePlaceholderStates, { state: tableState, errorState: errorState, rowVerticalPadding: rowVerticalPadding, showTitleBar: showTitleBar, emptyState: emptyState, noResultsState: typeof noResultsState === 'function'
                ? () => {
                    const { result: { originQuery, hasAvailableItems }, } = collection;
                    return noResultsState({
                        hasAvailableItems,
                        query: originQuery,
                    });
                }
                : noResultsState }),
        React.createElement(CollectionTableContent, { state: tableState },
            useNewInfiniteScrollLoader || internalScroll ? (React.createElement(PageInfiniteScrollLoader, { dataHook: "infinite-scroll-loader", state: collection, scrollMoreAlways: true })) : undefined,
            children)));
    if (dragAndDrop) {
        const { TableDragAndDropContext } = dragAndDrop;
        table = (React.createElement(TableDragAndDropContext, { state: state, onSubmit: dragAndDropSubmit, onBulkSubmit: dragAndDropBulkSubmit }, table));
    }
    return (React.createElement(CollectionCard, { errorState: errorState, state: state, dataHook: dataHook, dataExtension: dataExtensionType, tags: tags, ...cardProps },
        exportModal ?? state.featuredComponents.exportModal.value,
        bulkActionModal && (React.createElement(SingleCollectionBulkActionModal, { state: state, bulkActionModal: bulkActionModal })),
        table));
}
export const CollectionTable = observer(_CollectionTable);
//# sourceMappingURL=CollectionTable.js.map