import { jsxs, jsx } from 'react/jsx-runtime';
import { Popover } from '../../core/Popover/Popover.js';
import '../../core/Popover/PopoverContext.js';
import '../../core/Popover/PopoverBody.js';
import { Cog6ToothIcon } from '@heroicons/react/24/outline';
import { Button } from '../../core/Button/Button.js';
import 'react';
import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';

function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onToggleColumn, onResetToDefault, onColumnReorder, }) {
    const orderedColumns = columnOrder.length > 0
        ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
        : columns;
    const renderColumnItem = (column) => {
        const isVisible = visibleColumns.includes(column.id);
        const isLocked = column.locked === true;
        const displayName = typeof column.header === 'string' ? column.header : column.id;
        return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
    };
    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
}
const TableColumnManager = TableColumnManagerComponent;

export { TableColumnManager };
