"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { TextAlignBottomIcon, TextAlignTopIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { Flex } from '../../flex/flex.js';
import { IconButton } from '../../icon-button/icon-button.js';
import { Select } from '../../select/select.js';
import { Text } from '../../text/text.js';
import styles from '../data-table.module.css.js';
import { SortOrders } from '../data-table.types.js';

function Ordering({ columnList, onChange, value }) {
    function handleColumnChange(columnId) {
        onChange(columnId, value.order);
    }
    function handleOrderChange() {
        const newOrder = value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;
        onChange(value.name, newOrder);
    }
    return (jsxs(Flex, { justify: 'between', align: 'center', children: [jsx(Text, { size: 2, weight: 500, className: styles['flex-1'], children: "Ordering" }), jsxs(Flex, { gap: 'extra-small', className: styles['flex-1'], children: [jsxs(Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsx(Select.Trigger, { size: 'small', className: styles['display-popover-properties-select'], "with-icon-button": 'true', children: jsx(Select.Value, { placeholder: 'Select value' }) }), jsx(Select.Content, { "data-variant": 'filter', children: columnList.map(column => (jsx(Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsx(IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === SortOrders?.ASC ? (jsx(TextAlignBottomIcon, { className: styles['display-popover-sort-icon'] })) : (jsx(TextAlignTopIcon, { className: styles['display-popover-sort-icon'] })) })] })] }));
}

export { Ordering };
//# sourceMappingURL=ordering.js.map
