import * as classnames from "classnames";
import * as React from "react";
import * as PropTypes from "prop-types";
import * as tablePropTypes from "./tablePropTypes";
import Cell from "./Cell";
import SortIcons from "./SortIcons";
import { FlexBox, ItemAlign } from "../flex";
import "./HeaderCell.less";
export var 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",
};
export default 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, { isHeader: true, "aria-sort": sortable && activeSortDirection ? activeSortDirection + "ending" : null, className: classnames(cssClass.HEADER_CELL, sortable && cssClass.SORTABLE, className), onClick: function () { return sortable && onSortChange(); }, onKeyUp: function (e) { return (e.key === Enter || e.key === Space) && sortable && onSortChange(); }, width: width },
        React.createElement(FlexBox, { alignItems: ItemAlign.CENTER },
            React.createElement("div", { className: cssClass.LABEL, tabIndex: sortable ? 0 : null, role: sortable ? "button" : null }, children),
            sortable && (React.createElement("div", { "aria-hidden": "true" },
                React.createElement(SortIcons, { direction: activeSortDirection, className: cssClass.SORT }))))));
}
HeaderCell.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    onSortChange: PropTypes.func,
    sortable: PropTypes.bool,
    activeSortDirection: tablePropTypes.sortDirection,
    width: PropTypes.string,
};
