import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { TextAlignBottomIcon, TextAlignTopIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/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 (jsxRuntimeExports.jsxs(Flex, { justify: "between", align: "center", children: [jsxRuntimeExports.jsx(Text, { size: 2, weight: 500, className: styles["flex-1"], children: "Ordering" }), jsxRuntimeExports.jsxs(Flex, { gap: "extra-small", className: styles["flex-1"], children: [jsxRuntimeExports.jsxs(Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsxRuntimeExports.jsx(Select.Trigger, { size: "small", className: styles["display-popover-properties-select"], "with-icon-button": "true", children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: columnList.map((column) => (jsxRuntimeExports.jsx(Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsxRuntimeExports.jsx(IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === SortOrders?.ASC ? (jsxRuntimeExports.jsx(TextAlignBottomIcon, { className: styles["display-popover-sort-icon"] })) : (jsxRuntimeExports.jsx(TextAlignTopIcon, { className: styles["display-popover-sort-icon"] })) })] })] }));
}

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