import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useCallback, useEffect, useMemo, useState } from "react";
import { UiAsyncTableCheckbox } from "./UiAsyncTableCheckbox.js";
import { getColumnWidth } from "./utils.js";
import { makeTabsKeyboardNavigation } from "../../@utils/keyboardNavigation.js";
import { UiIcon } from "../../UiIcon/UiIcon.js";
import { e } from "../asyncTableBem.js";
const arrowIcon = _jsx(UiIcon, { type: "dropDown", size: 11, color: "complementary-6" });
export function UiAsyncTableHeader({ columns, handleColumnClick, sortBy, sortDirection, hasCheckbox, width, small, largeRow, }) {
    const { handleKeyDown, isFocused } = useHeaderKeyboardNavigation(columns, handleColumnClick);
    return (_jsxs("div", { tabIndex: 0, className: e("header", { small }), role: "row", onKeyDown: handleKeyDown, style: { width }, children: [hasCheckbox ? _jsx(UiAsyncTableCheckbox, {}) : null, columns.map((column, index) => {
                const width = getColumnWidth(!!column.renderMenu, largeRow, column.width);
                const sorted = sortBy && sortBy === column.key;
                const desc = sorted && sortDirection === "desc";
                const { sortable } = column;
                return (_jsxs("div", { onClick: () => sortable && handleColumnClick(column.key), className: e("cell", {
                        sorted,
                        desc,
                        sortable,
                        isFocused: isFocused(index),
                        align: column.align,
                    }), style: { width }, role: "columnheader", "aria-sort": sorted ? (desc ? "descending" : "ascending") : "none", children: [_jsx("span", { className: e("text"), children: column.label }), sortable ? _jsx("div", { className: e("sort"), children: arrowIcon }) : null] }, index));
            })] }));
}
function useHeaderKeyboardNavigation(columns, handleColumnClick) {
    const [focusedIndexPosition, setFocusedIndexPosition] = useState(0);
    useEffect(() => {
        setFocusedIndexPosition(0);
    }, [columns]);
    const focusableIndexes = useMemo(() => columns.map((_, index) => index).filter((index) => columns[index].sortable), [columns]);
    const handleKeyDown = useMemo(() => {
        return makeTabsKeyboardNavigation({
            onSelect: () => {
                if (columns[focusableIndexes[focusedIndexPosition]].sortable) {
                    handleColumnClick(columns[focusableIndexes[focusedIndexPosition]].key);
                }
            },
            onFocusNext: () => {
                setFocusedIndexPosition(focusedIndexPosition >= focusableIndexes.length - 1 ? 0 : focusedIndexPosition + 1);
            },
            onFocusPrevious: () => {
                setFocusedIndexPosition(focusedIndexPosition <= 0 ? focusableIndexes.length - 1 : focusedIndexPosition - 1);
            },
            onFocusFirst: () => {
                setFocusedIndexPosition(0);
            },
            onFocusLast: () => {
                setFocusedIndexPosition(focusableIndexes.length - 1);
            },
        });
    }, [handleColumnClick, focusedIndexPosition, setFocusedIndexPosition, focusableIndexes, columns]);
    const isFocused = useCallback((index) => {
        return focusableIndexes[focusedIndexPosition] === index;
    }, [focusableIndexes, focusedIndexPosition]);
    return {
        handleKeyDown,
        isFocused,
    };
}
//# sourceMappingURL=UiAsyncTableHeader.js.map