import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { Flex } from '../../flex/flex.js';
import styles from '../data-table.module.css.js';
import { Text } from '../../text/text.js';
import { Select } from '../../select/select.js';
import { defaultGroupOption, SortOrders } from '../data-table.types.js';

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

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