'use strict';

var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var flex = require('../../flex/flex.cjs');
var iconButton = require('../../icon-button/icon-button.cjs');
var select = require('../../select/select.cjs');
var text = require('../../text/text.cjs');
var dataTable_module = require('../data-table.module.css.cjs');
var dataTable_types = require('../data-table.types.cjs');

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

exports.Ordering = Ordering;
//# sourceMappingURL=ordering.cjs.map
