import { jsx, jsxs } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { TableCell } from './TableCell.js';
import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
import { getRowId, UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';

function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
    const handleSort = useCallback((columnId) => {
        if (!onSortChange)
            return;
        const currentSort = sortConfig.find(sort => sort.columnId === columnId);
        const newSortConfig = [...sortConfig.filter(sort => sort.columnId !== columnId)];
        if (!currentSort) {
            newSortConfig.push({
                columnId,
                direction: 'asc',
                priority: sortConfig.length + 1,
            });
        }
        else if (currentSort.direction === 'asc') {
            newSortConfig.push({
                columnId,
                direction: 'desc',
                priority: currentSort.priority,
            });
        }
        onSortChange(newSortConfig);
    }, [sortConfig, onSortChange]);
    const handleSelectAll = useCallback((checked) => {
        if (!onSelectionChange || selectionType !== 'checkbox')
            return;
        if (checked) {
            const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
            onSelectionChange(allRowIds);
        }
        else {
            onSelectionChange([]);
        }
    }, [data, rowKey, selectionType, onSelectionChange]);
    const dataLength = data.length;
    const isAllSelected = selectedRows.length === dataLength && dataLength > 0;
    const isIndeterminate = selectedRows.length > 0 && selectedRows.length < dataLength;
    return (jsx("thead", { className: freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '', children: jsxs("tr", { children: [(selectable || (expandable && expandedRowRender)) && (jsx(TableCell, { column: {
                        id: UTILITY_COLUMN_ID,
                        header: '',
                        accessor: () => '',
                        width: UTILITY_COLUMN_WIDTH,
                    }, row: {}, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })) }) })), columns.map((column, index) => {
                    const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                    const isSortable = column.sortable && onSortChange;
                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
                })] }) }));
}
const TableHeader = TableHeaderComponent;

export { TableHeader };
