import * as tslib_1 from "tslib";
import WidgetBase from '@dojo/framework/core/WidgetBase';
import { v, w } from '@dojo/framework/core/vdom';
import Drag from '@dojo/framework/core/meta/Drag';
import I18nMixin from '@dojo/framework/core/mixins/I18n';
import ThemedMixin, { theme } from '@dojo/framework/core/mixins/Themed';
import TextInput from '../text-input/index';
import Icon from '../icon/index';
import bundle from './nls/Grid';
import * as css from '../theme/default/grid-header.m.css';
import * as fixedCss from './styles/header.m.css';
let Header = class Header extends I18nMixin(ThemedMixin(WidgetBase)) {
    constructor() {
        super(...arguments);
        this._sortRenderer = (column, direction, sorter) => {
            const { theme, classes } = this.properties;
            const { format } = this.localizeBundle(bundle);
            return v('button', { classes: this.theme(css.sort), onclick: sorter }, [
                w(Icon, {
                    theme,
                    classes,
                    type: direction === 'asc' ? 'upIcon' : 'downIcon',
                    altText: format('sortBy', {
                        name: this._getColumnTitle(column)
                    })
                })
            ]);
        };
        this._filterRenderer = (columnConfig, filterValue, doFilter, title) => {
            const { theme, classes = {} } = this.properties;
            const { format } = this.localizeBundle(bundle);
            return w(TextInput, {
                key: 'filter',
                theme,
                classes: Object.assign({}, classes, { '@dojo/widgets/text-input': Object.assign({ root: [this.theme(css.filter)], input: [this.theme(css.filterInput)], noLabel: [this.theme(css.filterNoLabel)] }, classes['@dojo/widgets/text-input']) }),
                labelHidden: true,
                type: 'search',
                initialValue: filterValue || undefined,
                onValue: doFilter
            }, [{ label: format('filterBy', { name: title }) }]);
        };
    }
    _getColumnTitle(column) {
        if (typeof column.title === 'function') {
            return column.title();
        }
        return column.title;
    }
    _sortColumn(id) {
        const { sort, sorter } = this.properties;
        const direction = sort
            ? sort.columnId !== id
                ? 'desc'
                : sort.direction === 'desc'
                    ? 'asc'
                    : 'desc'
            : 'desc';
        sorter(id, direction);
    }
    render() {
        const { columnConfig, sort, filterer, filter = {}, sortRenderer = this._sortRenderer, filterRenderer = this._filterRenderer, columnWidths, onColumnResize } = this.properties;
        const rowWidth = columnWidths &&
            Object.keys(columnWidths).reduce((rowWidth, key) => {
                return rowWidth + columnWidths[key];
            }, 0);
        return v('div', {
            styles: rowWidth ? { width: `${rowWidth}px` } : {},
            classes: [this.theme(css.root), fixedCss.rootFixed],
            role: 'row'
        }, columnConfig.map((column, index) => {
            const title = this._getColumnTitle(column);
            let headerProperties = {};
            const isSorted = sort && sort.columnId === column.id;
            const isSortedAsc = Boolean(sort && sort.columnId === column.id && sort.direction === 'asc');
            if (column.sortable) {
                headerProperties = {
                    classes: [
                        fixedCss.column,
                        this.theme(css.sortable),
                        isSorted ? this.theme(css.sorted) : null,
                        isSorted && !isSortedAsc ? this.theme(css.desc) : null,
                        isSortedAsc ? this.theme(css.asc) : null
                    ],
                    onclick: () => {
                        this._sortColumn(column.id);
                    }
                };
            }
            const filterKeys = Object.keys(filter);
            const direction = !isSorted ? undefined : isSortedAsc ? 'asc' : 'desc';
            const filterValue = filterKeys.indexOf(column.id) > -1 ? filter[column.id] : '';
            const doFilter = (value) => {
                filterer(column.id, value);
            };
            if (column.resizable) {
                const dragResults = this.meta(Drag).get(`${column.id}-resize`);
                if (dragResults.isDragging) {
                    dragResults.delta.x !== 0 &&
                        onColumnResize &&
                        onColumnResize(index, dragResults.delta.x);
                }
            }
            return v('div', {
                'aria-sort': isSorted
                    ? isSortedAsc
                        ? 'ascending'
                        : 'descending'
                    : undefined,
                classes: [this.theme(css.cell), fixedCss.cellFixed],
                role: 'columnheader',
                styles: columnWidths
                    ? {
                        flex: `0 1 ${columnWidths[column.id]}px`
                    }
                    : {}
            }, [
                v('div', headerProperties, [
                    title,
                    column.sortable
                        ? sortRenderer(column, direction, () => {
                            this._sortColumn(column.id);
                        })
                        : null
                ]),
                column.filterable
                    ? filterRenderer(column, filterValue, doFilter, title)
                    : null,
                column.resizable &&
                    v('span', {
                        key: `${column.id}-resize`,
                        classes: [fixedCss.resize]
                    })
            ]);
        }));
    }
};
Header = tslib_1.__decorate([
    theme(css)
], Header);
export default Header;

/*# sourceMappingURL=Header.mjs.map*/