"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var button = require('../../button/button.cjs');
var flex = require('../../flex/flex.cjs');
var popover = require('../../popover/popover.cjs');
var dataTable_module = require('../data-table.module.css.cjs');
var dataTable_types = require('../data-table.types.cjs');
var useDataTable = require('../hooks/useDataTable.cjs');
var displayProperties = require('./display-properties.cjs');
var grouping = require('./grouping.cjs');
var ordering = require('./ordering.cjs');

function DisplaySettings() {
    const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset } = useDataTable.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 (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsxRuntime.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntime.jsx(popover.Popover.Content, { className: dataTable_module.default['display-popover-content'], align: 'end', children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', className: dataTable_module.default['display-popover-properties-container'], gap: 5, children: [jsxRuntime.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsx(grouping.Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['display-popover-properties-container'], children: jsxRuntime.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsx(flex.Flex, { justify: 'end', className: dataTable_module.default['display-popover-reset-container'], children: jsxRuntime.jsx(button.Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
}

exports.DisplaySettings = DisplaySettings;
//# sourceMappingURL=display-settings.cjs.map
