import React from 'react';
import { Box, IconButton, Tooltip, TableListItem } from '@wix/design-system';
import { DeleteSmall } from '@wix/wix-ui-icons-common';
import { observer } from 'mobx-react-lite';
import { MultiLevelSortingColumnSelect } from './MultiLevelSortingColumnSelect';
import { MultiLevelSortingOrderSelect } from './MultiLevelSortingOrderSelect';
import { useWixPatternsContainer } from '@wix/bex-core/react';
function _MultiLevelSortingTableListItem(props) {
    const { sortableColumn, state, domRef, dragging, draggable, index, showDivider, dragHandleProps, droppable, ...rest } = props;
    const { translate: t } = useWixPatternsContainer();
    return (React.createElement("div", { ref: domRef, "data-hook": `multi-level-sorting-item-${sortableColumn.columnId}`, ...rest },
        React.createElement(TableListItem, { verticalPadding: "tiny", draggable: draggable, dragging: dragging, showDivider: showDivider, options: [
                {
                    value: (React.createElement(Box, { width: "100%", direction: "horizontal", verticalAlign: "middle", gap: "SP2" },
                        React.createElement(MultiLevelSortingColumnSelect, { sortableColumn: sortableColumn, state: state, index: index }),
                        React.createElement(MultiLevelSortingOrderSelect, { sortableColumn: sortableColumn, state: state }),
                        React.createElement(Tooltip, { content: t('cairo.table.advanced-sorting.remove.button.tooltip') },
                            React.createElement(IconButton, { dataHook: "multi-level-sorting-remove-sort", size: "small", skin: "light", onClick: () => {
                                    state.removeSort(sortableColumn.columnId);
                                } },
                                React.createElement(DeleteSmall, null))))),
                },
            ] })));
}
export const MultiLevelSortingTableListItem = observer(_MultiLevelSortingTableListItem);
//# sourceMappingURL=MultiLevelSortingTableListItem.js.map