import React, { useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { Box } from '@wix/design-system';
import { ListDragAndDropContext } from '../ListDragAndDrop/ListDragAndDropContext';
import { DraggableListItem } from '../ListDragAndDrop/DraggableListItem';
import { MultiLevelSortingTableListItem } from './MultiLevelSortingTableListItem';
import { DraggableCardOverlay } from '../GridDragAndDropDndKit/DraggableCardOverlay';
export function _MultiLevelSortingList(props) {
    const { state } = props;
    const { dragAndDrop } = state;
    const renderItem = useCallback((sortableColumn, index, { length }) => {
        return (React.createElement(DraggableListItem, { key: sortableColumn.key, id: sortableColumn.key, index: index, state: dragAndDrop },
            React.createElement(MultiLevelSortingTableListItem, { key: sortableColumn.key, sortableColumn: sortableColumn, index: index, state: state, showDivider: index < length - 1 })));
    }, []);
    return (React.createElement(ListDragAndDropContext, { state: dragAndDrop, onSubmit: async ({ from, over }) => {
            dragAndDrop._onSortReorder(from.item.columnId, over.item.columnId);
        } },
        React.createElement(React.Fragment, null,
            React.createElement(Box, { direction: "vertical", dataHook: "multi-level-sorting-list", backgroundColor: "D60" }, state.sortingCollection.result.items.map(renderItem)),
            React.createElement(DraggableCardOverlay, { state: dragAndDrop, renderItem: (index) => {
                    const item = state.sortingCollection.result.items[index];
                    return item ? renderItem(item, index, { length: 0 }) : null;
                } }))));
}
export const MultiLevelSortingList = observer(_MultiLevelSortingList);
//# sourceMappingURL=MultiLevelSortingList.js.map