import { h } from "@stencil/core";
import { TableClasses } from '../table.utils';
var Translations;
(function (Translations) {
    Translations["SORT_ASC"] = "Press enter to sort column ascending";
    Translations["SORT_DESC"] = "Press enter to sort column descending";
})(Translations || (Translations = {}));
export const Th = ({ classList, column, columnIndex, filtering, offset, translator }) => {
    const attrs = column.span ? { colspan: column.span } : {};
    const label = (column.sortOrder === undefined || column.sortOrder === 'asc')
        ? translator(Translations.SORT_DESC)
        : translator(Translations.SORT_ASC);
    const ariaLabel = column.sortable
        ? label
        : undefined;
    return (h("th", Object.assign({}, attrs, { class: classList, tabIndex: column.sortable ? 0 : -1, "aria-label": `${column.caption || column.field}: ${ariaLabel}`, "data-column-index": columnIndex, ref: r => column.initCell(r, offset) }),
        column.dataType === 'number'
            ? h("anj-column-control", { column: column, field: column.field, sortIndex: column.sortIndex, sortOrder: column.sortOrder, pinned: column.pinned })
            : undefined,
        column.headerFormatter
            ? h("span", { class: TableClasses.caption, innerHTML: column.headerFormatter(column.field, column.caption) })
            : h("span", { class: TableClasses.caption }, column.headerRenderer(column.field, column.caption)),
        column.dataType !== 'number'
            ? h("anj-column-control", { column: column, field: column.field, sortIndex: column.sortIndex, sortOrder: column.sortOrder, pinned: column.pinned })
            : undefined,
        filtering && column.filterable ?
            h("anj-column-filter-toggle", { types: column.filterTypes, filter: column.filter, field: column.field, dataType: column.dataType }) : undefined));
};
