"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { Flex } from '../../flex/flex.js';
import { Select } from '../../select/select.js';
import { Text } from '../../text/text.js';
import styles from '../data-table.module.css.js';
import { defaultGroupOption } from '../data-table.types.js';

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

export { Grouping };
//# sourceMappingURL=grouping.js.map
