"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableColumnHeader = void 0;
const react_1 = __importStar(require("react"));
const aksel_icons_1 = require("@navikt/aksel-icons");
const DataGridRoot_context_1 = require("../../../data-grid/root/DataGridRoot.context");
const helpers_1 = require("../../../utils/helpers");
const hooks_1 = require("../../../utils/hooks");
const DataTableBaseCell_1 = require("../base-cell/DataTableBaseCell");
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
const useTableColumnResize_1 = require("./useTableColumnResize");
const SORT_ICON = {
    asc: aksel_icons_1.SortUpIcon,
    desc: aksel_icons_1.SortDownIcon,
    none: aksel_icons_1.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 = (0, react_1.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 } = (0, DataGridRoot_context_1.useDataGridContext)();
    const thRef = (0, react_1.useRef)(null);
    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, thRef);
    const { sortingState } = (0, DataTableRoot_context_1.useDataTableContext)();
    const { onSortClick, sortState } = sortingState;
    const resizeResult = (0, useTableColumnResize_1.useTableColumnResize)(Object.assign(Object.assign({}, width), { thRef, colSpan: rest.colSpan }));
    const sortDirection = (0, react_1.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_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: (0, helpers_1.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_1.default.createElement("button", { type: "button", className: "aksel-data-table__th-sort-button", onClick: (event) => onSortClick(id, event), disabled: isLoading },
            react_1.default.createElement("div", { id: contentId, className: "aksel-data-table__th-content" }, children),
            SortIcon && (react_1.default.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (react_1.default.createElement("div", { id: contentId, className: (0, helpers_1.cl)({
                "aksel-data-table__th-content": cellType !== "action",
            }) }, children)),
        resizeResult.enabled && cellType !== "action" && (react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
                react_1.default.createElement(aksel_icons_1.CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
            react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
                react_1.default.createElement(aksel_icons_1.CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
});
exports.DataTableColumnHeader = DataTableColumnHeader;
function getAriaSort(sortDirection) {
    if (sortDirection === "asc")
        return "ascending";
    if (sortDirection === "desc")
        return "descending";
    if (sortDirection === "none")
        return "none";
    return undefined;
}
//# sourceMappingURL=DataTableColumnHeader.js.map