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 { Button } from '../../button/button.js';
import { Popover } from '../../popover/popover.js';
import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { useDataTable } from '../hooks/useDataTable.js';
import { defaultGroupOption } from '../data-table.types.js';
import { Ordering } from './ordering.js';
import { Grouping } from './grouping.js';
import { DisplayProperties } from './display-properties.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, order) {
        updateTableQuery((query) => {
            return {
                ...query,
                group_by: [columnId],
                __group_by_sort: order,
            };
        });
    }
    function onReset() {
        onDisplaySettingsReset();
    }
    return (jsxRuntimeExports.jsxs(Popover, { children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", color: "neutral", size: "small", leadingIcon: jsxRuntimeExports.jsx(MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntimeExports.jsx(Popover.Content, { className: styles["display-popover-content"], align: "end", children: jsxRuntimeExports.jsxs(Flex, { direction: "column", children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles["display-popover-properties-container"], gap: 5, children: [jsxRuntimeExports.jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntimeExports.jsx(Grouping, { columns: columns, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsxRuntimeExports.jsx(Flex, { className: styles["display-popover-properties-container"], children: jsxRuntimeExports.jsx(DisplayProperties, { columns: columns }) }), jsxRuntimeExports.jsx(Flex, { justify: "end", className: styles["display-popover-reset-container"], children: jsxRuntimeExports.jsx(Button, { variant: "text", onClick: onReset, children: "Reset to default" }) })] }) })] }));
}

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