import { Avatar } from '@wix/design-system';
import React, { useCallback, useState, } from 'react';
import { observer } from 'mobx-react-lite';
import { FolderIcon } from '../FolderIcon';
import { CollectionTableWSRTable, } from '../CollectionTable/CollectionTableWSRTable';
import { CollectionTableContent } from '../CollectionTable/CollectionTableContent';
import { VirtualTableRepeater, } from '../VirtualGridRepeater/VirtualTableRepeater';
import { VirtualGridStateProvider } from '../VirtualGridRepeater/VirtualGridStateContext';
import { useOrFolderActionCellColumn } from './useOrFolderActionCellColumn';
import { TableFoldersInfiniteScroll } from './TableFoldersInfiniteScroll';
import { MultiCollectionBulkActionToolbar, } from '../BulkAction';
import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
import { getVirtualTableProps } from '../Table/getVirtualTableProps';
function _TableFoldersContent(props) {
    const { state, columns, renderError, errorState = renderError &&
        ((err, { isOnline, retry }) => renderError?.({ err, isOnline, retry })), emptyState, noResultsState, iconColumn, multiLevelSorting, actionCell, folderActionCell, actionCellWidth, actionCellProps, filters, customColumns, views, bulkActionToolbar, bulkActionModal, tableGridSwitchButton, topNotification, search, showTitleBar = !state.container.isPanelLayout, onRowClick, onFolderRowClick, selectionDisabled: selectionDisabledProp, horizontalScroll = true, rowVerticalPadding, ...rest } = props;
    const actionCellColumn = useOrFolderActionCellColumn({
        actionCell,
        folderActionCell,
        actionCellWidth,
        actionCellProps: {
            ...(actionCellProps ?? {}),
            stickyActionCell: true,
        },
        state: state.collections,
    });
    const { toolbar: { selectedOrderedColumnsOrAll }, } = state;
    const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: state.toolbar.showFieldTypeIcons });
    const finalColumns = [
        {
            key: 'cairo-avatar',
            title: '',
            width: '48px',
            ...iconColumn,
            style: undefined,
            render: ({ item }, rowNum) => {
                if (item._tag === 'folder') {
                    return (iconColumn?.renderFolder?.(item.originalKeyedItem.item, rowNum) ?? (React.createElement(FolderIcon, { "data-hook": "folder-icon" })));
                }
                return (iconColumn?.render?.(item.originalKeyedItem.item, rowNum) ?? (React.createElement(Avatar, { dataHook: "item-avatar", name: state.collections.items.itemName(item.originalKeyedItem.item) })));
            },
        },
        ...selectedOrderedColumnsOrAll.map((column, index, { length }) => {
            const { id, title, width, sortable, infoTooltipProps, render, renderFolder, ...restColumn } = column;
            return {
                ...restColumn,
                ...createWSRColumnBase(column, index, length),
                sortDescending: sortable && id
                    ? state.collections.query.sort.getIsSortDescending(id)
                    : undefined,
                render: (row, rowNum) => {
                    const item = row.item;
                    if (item._tag === 'folder') {
                        return renderFolder?.(item.originalKeyedItem.item, rowNum);
                    }
                    return render(item.originalKeyedItem.item, rowNum);
                },
            };
        }),
        ...(actionCellColumn ? [actionCellColumn] : []),
    ];
    const [BodyElementType] = useState(() => ({ children }) => (React.createElement(VirtualGridStateProvider, { value: state.virtual },
        React.createElement(VirtualTableRepeater, null, children))));
    const selectionDisabled = useCallback(({ item }) => selectionDisabledProp?.(item), [selectionDisabledProp]);
    if (selectionDisabled != null) {
        state.toolbar.bulk.selectionDisabledProp =
            selectionDisabled;
    }
    const Table = CollectionTableWSRTable;
    const showSelection = bulkActionToolbar != null;
    return (React.createElement(Table, { ...rest, showHeaderWhenEmpty: true, state: state, sticky: true, search: search, filters: filters, customColumns: customColumns, views: views, showSelection: showSelection, selectionToolbar: bulkActionToolbar && (React.createElement(MultiCollectionBulkActionToolbar, { state: state.toolbar, bulkActionToolbar: bulkActionToolbar })), tableGridSwitchButton: tableGridSwitchButton, horizontalScroll: horizontalScroll, emptyState: emptyState, noResultsState: noResultsState, ...getVirtualTableProps({ horizontalScroll }), columns: finalColumns, showTitleBar: showTitleBar, isApplyColumnWidthStyle: true, BodyElementType: BodyElementType, onSortClick: (col) => {
            if (col.id != null) {
                state.collections.items.sort({ id: col.id, sortMode: col.sortMode }, {
                    clearResult: true,
                    multiple: multiLevelSorting !== undefined,
                });
            }
        }, onRowClick: (onRowClick || onFolderRowClick) &&
            (({ item }, index) => {
                if (item._tag === 'folder') {
                    onFolderRowClick?.(item.originalKeyedItem.item, index);
                }
                else {
                    onRowClick?.(item.originalKeyedItem.item, index);
                }
            }), selectionDisabled: selectionDisabledProp &&
            (({ item }) => selectionDisabledProp?.(item.originalKeyedItem.item)), topNotification: topNotification },
        React.createElement(TablePlaceholderStates, { state: state, emptyState: emptyState, noResultsState: noResultsState, errorState: errorState, rowVerticalPadding: rowVerticalPadding, showTitleBar: showTitleBar }),
        React.createElement(CollectionTableContent, { state: state.table },
            React.createElement(TableFoldersInfiniteScroll, { state: state }))));
}
export const TableFoldersContent = observer(_TableFoldersContent);
//# sourceMappingURL=TableFoldersContent.js.map