'use strict';

var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var flex = require('../../flex/flex.cjs');
var dataTable_module = require('../data-table.module.css.cjs');
var text = require('../../text/text.cjs');
var select = require('../../select/select.cjs');
var dataTable_types = require('../data-table.types.cjs');

function Grouping({ columns = [], onChange, value, }) {
    const columnList = columns
        .filter((column) => column.columnDef.enableGrouping)
        ?.map((column) => {
        const id = column.id;
        return {
            label: column.columnDef.header || id,
            id: id,
        };
    });
    const handleGroupChange = (columnId) => {
        const column = columns.find((col) => col.id === columnId);
        if (column) {
            onChange(column.id, column.columnDef.groupSortOrder || dataTable_types.SortOrders.ASC);
        }
    };
    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: "Grouping" }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { className: dataTable_module.default["flex-1"], children: jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { onValueChange: handleGroupChange, value: value, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { size: "small", className: dataTable_module.default["display-popover-properties-select"], children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select.Content, { "data-variant": "filter", children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: dataTable_types.defaultGroupOption.id, children: dataTable_types.defaultGroupOption.label }), columnList.map((column) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
}

exports.Grouping = Grouping;
//# sourceMappingURL=grouping.cjs.map
