"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cssClass = void 0;
var classnames = require("classnames");
var React = require("react");
var PropTypes = require("prop-types");
var tablePropTypes = require("./tablePropTypes");
var Cell_1 = require("./Cell");
var SortIcons_1 = require("./SortIcons");
var flex_1 = require("../flex");
require("./HeaderCell.less");
exports.cssClass = {
    CONTENT: "Table--header--cell--content",
    HEADER_CELL: "Table--header--cell",
    LABEL: "Table--header--cell--label",
    SORTABLE: "Table--header--cell--sortable",
    SORT: "Table--header--cell--sort_icons",
};
function HeaderCell(_a) {
    var children = _a.children, className = _a.className, onSortChange = _a.onSortChange, sortable = _a.sortable, activeSortDirection = _a.activeSortDirection, width = _a.width;
    var Enter = "Enter";
    var Space = " ";
    return (React.createElement(Cell_1.default, { isHeader: true, "aria-sort": sortable && activeSortDirection ? activeSortDirection + "ending" : null, className: classnames(exports.cssClass.HEADER_CELL, sortable && exports.cssClass.SORTABLE, className), onClick: function () { return sortable && onSortChange(); }, onKeyUp: function (e) { return (e.key === Enter || e.key === Space) && sortable && onSortChange(); }, width: width },
        React.createElement(flex_1.FlexBox, { alignItems: flex_1.ItemAlign.CENTER },
            React.createElement("div", { className: exports.cssClass.LABEL, tabIndex: sortable ? 0 : null, role: sortable ? "button" : null }, children),
            sortable && (React.createElement("div", { "aria-hidden": "true" },
                React.createElement(SortIcons_1.default, { direction: activeSortDirection, className: exports.cssClass.SORT }))))));
}
exports.default = HeaderCell;
HeaderCell.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    onSortChange: PropTypes.func,
    sortable: PropTypes.bool,
    activeSortDirection: tablePropTypes.sortDirection,
    width: PropTypes.string,
};
