var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useMemo, useRef } from "react";
import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context.js";
import { cl } from "../../../utils/helpers/index.js";
import { useMergeRefs } from "../../../utils/hooks/index.js";
import { DataTableBaseCell, } from "../base-cell/DataTableBaseCell.js";
import { useDataTableContext } from "../root/DataTableRoot.context.js";
import { useTableColumnResize } from "./useTableColumnResize.js";
const SORT_ICON = {
    asc: SortUpIcon,
    desc: SortDownIcon,
    none: ArrowsUpDownIcon,
};
/**
 * TODO:
 * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
 * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
 */
const DataTableColumnHeader = forwardRef((_a, forwardedRef) => {
    var { id, label, sortable = false, width, cellType, className, children, style } = _a, rest = __rest(_a, ["id", "label", "sortable", "width", "cellType", "className", "children", "style"]);
    const { isLoading } = useDataGridContext();
    const thRef = useRef(null);
    const mergedRef = useMergeRefs(forwardedRef, thRef);
    const { sortingState } = useDataTableContext();
    const { onSortClick, sortState } = sortingState;
    const resizeResult = useTableColumnResize(Object.assign(Object.assign({}, width), { thRef, colSpan: rest.colSpan }));
    const sortDirection = useMemo(() => {
        var _a;
        const sortEntry = sortState.find((s) => s.columnId === id);
        return (_a = sortEntry === null || sortEntry === void 0 ? void 0 : sortEntry.direction) !== null && _a !== void 0 ? _a : "none";
    }, [id, sortState]);
    const canSort = sortable && id !== undefined;
    const SortIcon = canSort ? SORT_ICON[sortDirection] : null;
    const contentId = `th-content-${id.replace(/\s/g, "-")}`;
    return (React.createElement(DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: cl("aksel-data-table__column-header", className), "data-sortable": canSort, style: Object.assign(Object.assign({}, style), { width: resizeResult.width }), "aria-sort": canSort ? getAriaSort(sortDirection) : undefined, cellType: cellType, "aria-labelledby": contentId }),
        canSort ? (React.createElement("button", { type: "button", className: "aksel-data-table__th-sort-button", onClick: (event) => onSortClick(id, event), disabled: isLoading },
            React.createElement("div", { id: contentId, className: "aksel-data-table__th-content" }, children),
            SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (React.createElement("div", { id: contentId, className: cl({
                "aksel-data-table__th-content": cellType !== "action",
            }) }, children)),
        resizeResult.enabled && cellType !== "action" && (React.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { type: "button", className: "aksel-data-table__th-resize-handle", "aria-label": resizeResult.isResizingWithKeyboard
                ? "Bruk pil venstre/høyre"
                : `Endre bredde ${label}`, "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.width === "number" ? resizeResult.width : 0, "aria-valuetext": typeof resizeResult.width === "number" &&
                resizeResult.isResizingWithKeyboard
                ? resizeResult.width.toString()
                : " " // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
         }), resizeResult.isResizingWithKeyboard && (React.createElement(React.Fragment, null,
            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
                React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
                React.createElement(CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
});
function getAriaSort(sortDirection) {
    if (sortDirection === "asc")
        return "ascending";
    if (sortDirection === "desc")
        return "descending";
    if (sortDirection === "none")
        return "none";
    return undefined;
}
export { DataTableColumnHeader };
//# sourceMappingURL=DataTableColumnHeader.js.map