import React from 'react';
import { observer } from 'mobx-react-lite';
import { Dropdown, Input, Box, listItemSelectBuilder, } from '@wix/design-system';
import { ArrowUpSmall, ArrowDownSmall } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
export function _MultiLevelSortingOrderSelect(props) {
    const { translate: t } = useWixPatternsContainer();
    const { sortableColumn, state } = props;
    const options = [
        listItemSelectBuilder({
            id: 'asc',
            prefix: (React.createElement(Box, null,
                React.createElement(ArrowUpSmall, null))),
            title: t('cairo.table.advanced-sorting.ascending.order'),
            label: t('cairo.table.advanced-sorting.ascending.order'),
        }),
        listItemSelectBuilder({
            id: 'desc',
            prefix: (React.createElement(Box, null,
                React.createElement(ArrowDownSmall, null))),
            title: t('cairo.table.advanced-sorting.descending.order'),
            label: t('cairo.table.advanced-sorting.descending.order'),
        }),
    ];
    return (React.createElement(Dropdown, { dataHook: "multi-level-sorting-select-order", onSelect: ({ id }) => {
            state.changeSortOrder(sortableColumn.columnId, id);
        }, popoverProps: {
            appendTo: 'window',
        }, options: options, selectedId: sortableColumn.direction, size: "small", prefix: React.createElement(Input.IconAffix, null, sortableColumn.direction === 'asc' ? (React.createElement(ArrowUpSmall, null)) : (React.createElement(ArrowDownSmall, null))), valueParser: (option) => option.label }));
}
export const MultiLevelSortingOrderSelect = observer(_MultiLevelSortingOrderSelect);
//# sourceMappingURL=MultiLevelSortingOrderSelect.js.map