"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { Button } from '../../button/button.js';
import { Flex } from '../../flex/flex.js';
import { Popover } from '../../popover/popover.js';
import styles from '../data-table.module.css.js';
import { defaultGroupOption } from '../data-table.types.js';
import { useDataTable } from '../hooks/useDataTable.js';
import { DisplayProperties } from './display-properties.js';
import { Grouping } from './grouping.js';
import { Ordering } from './ordering.js';

function DisplaySettings() {
    const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset } = useDataTable();
    const columns = table?.getAllColumns();
    const sortableColumns = columns
        ?.filter(col => col.columnDef.enableSorting)
        ?.map(column => {
        const id = column.id;
        return {
            label: column.columnDef.header || id,
            id: id
        };
    });
    function onSortChange(columnId, order) {
        updateTableQuery(query => {
            return {
                ...query,
                sort: [{ name: columnId, order }]
            };
        });
    }
    function onGroupChange(columnId) {
        updateTableQuery(query => {
            return {
                ...query,
                group_by: [columnId]
            };
        });
    }
    function onGroupRemove() {
        updateTableQuery(query => {
            return {
                ...query,
                group_by: []
            };
        });
    }
    function onReset() {
        onDisplaySettingsReset();
    }
    return (jsxs(Popover, { children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsx(MixerHorizontalIcon, {}), children: "Display" }) }), jsx(Popover.Content, { className: styles['display-popover-content'], align: 'end', children: jsxs(Flex, { direction: 'column', children: [jsxs(Flex, { direction: 'column', className: styles['display-popover-properties-container'], gap: 5, children: [jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsx(Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsx(Flex, { className: styles['display-popover-properties-container'], children: jsx(DisplayProperties, { columns: columns }) }), jsx(Flex, { justify: 'end', className: styles['display-popover-reset-container'], children: jsx(Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
}

export { DisplaySettings };
//# sourceMappingURL=display-settings.js.map
