"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var flex = require('../../flex/flex.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 Grouping({ columns = [], onChange, onRemove, 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) => {
        if (columnId === dataTable_types.defaultGroupOption.id) {
            onRemove();
            return;
        }
        const column = columns.find(col => col.id === columnId);
        if (column) {
            onChange(column.id);
        }
    };
    return (jsxRuntime.jsxs(flex.Flex, { justify: 'between', align: 'center', children: [jsxRuntime.jsx(text.Text, { size: 2, weight: 500, className: dataTable_module.default['flex-1'], children: "Grouping" }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['flex-1'], children: jsxRuntime.jsxs(select.Select, { onValueChange: handleGroupChange, value: value, children: [jsxRuntime.jsx(select.Select.Trigger, { size: 'small', className: dataTable_module.default['display-popover-properties-select'], children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsxs(select.Select.Content, { "data-variant": 'filter', children: [jsxRuntime.jsx(select.Select.Item, { value: dataTable_types.defaultGroupOption.id, children: dataTable_types.defaultGroupOption.label }), columnList.map(column => (jsxRuntime.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
}

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