import * as tslib_1 from "tslib";
import WidgetBase from '@dojo/framework/core/WidgetBase';
import { v, w } from '@dojo/framework/core/vdom';
import I18nMixin from '@dojo/framework/core/mixins/I18n';
import ThemedMixin, { theme } from '@dojo/framework/core/mixins/Themed';
import PlaceholderRow from './PlaceholderRow';
import Row from './Row';
import * as fixedCss from './styles/body.m.css';
import * as css from '../theme/default/grid-body.m.css';
import { diffProperty } from '@dojo/framework/core/decorators/diffProperty';
import { reference } from '@dojo/framework/core/diff';
let PaginatedBody = class PaginatedBody extends I18nMixin(ThemedMixin(WidgetBase)) {
    _defaultPlaceholderRow(key) {
        const { classes, theme } = this.properties;
        return w(PlaceholderRow, { key, theme, classes });
    }
    _updater(rowNumber, columnId, value) {
        const page = Math.max(Math.ceil(rowNumber / this.properties.pageSize), 1);
        const pageItemNumber = rowNumber - (page - 1) * this.properties.pageSize;
        this.properties.updater(page, pageItemNumber, columnId, value);
    }
    _onScroll(event) {
        const scrollLeft = event.target.scrollLeft;
        this.properties.onScroll(scrollLeft);
    }
    _renderRows() {
        const { i18nBundle, pageSize, fetcher, pages, columnConfig, placeholderRowRenderer = this._defaultPlaceholderRow, pageNumber, theme, classes, columnWidths, onRowSelect, selectedRows = [] } = this.properties;
        let data = pages[`page-${pageNumber}`];
        if (!data) {
            fetcher(pageNumber, pageSize);
        }
        let rows = [];
        const rowCount = data ? data.length : pageSize;
        for (let i = 0; i < rowCount; i++) {
            if (!data) {
                rows.push(placeholderRowRenderer(i));
            }
            else {
                rows.push(w(Row, {
                    id: i,
                    key: i,
                    i18nBundle,
                    theme,
                    classes,
                    item: data[i],
                    columnConfig,
                    columnWidths,
                    updater: this._updater,
                    onRowSelect: onRowSelect
                        ? (type) => {
                            onRowSelect && onRowSelect(i, type);
                        }
                        : undefined,
                    selected: selectedRows.indexOf(i) !== -1
                }));
            }
        }
        return rows;
    }
    render() {
        const { height, width, columnWidths } = this.properties;
        const rowWidth = columnWidths &&
            Object.keys(columnWidths).reduce((rowWidth, key) => {
                return rowWidth + columnWidths[key];
            }, 0);
        return v('div', {
            key: 'root',
            classes: [this.theme(css.root), fixedCss.rootFixed],
            role: 'rowgroup',
            onscroll: this._onScroll,
            styles: width
                ? { height: `${height}px`, width: `${width}px` }
                : { height: `${height}px` }
        }, [
            v('div', { styles: rowWidth ? { width: `${rowWidth}px` } : {} }, [
                v('div'),
                ...this._renderRows()
            ])
        ]);
    }
};
PaginatedBody = tslib_1.__decorate([
    theme(css),
    diffProperty('pages', reference)
], PaginatedBody);
export default PaginatedBody;

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