import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
// import { IColumn } from './DetailsList.types'
import { css } from '@uifabric-vue/utilities';
import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
import BaseComponent from '../../BaseComponent';
var getCellText = function (item, column) {
    var value = item && column && column.fieldName ? item[column.fieldName] : '';
    if (value === null || value === undefined) {
        value = '';
    }
    if (typeof value === 'boolean') {
        return value.toString();
    }
    return value;
};
var DetailsRowFields = /** @class */ (function (_super) {
    __extends(DetailsRowFields, _super);
    function DetailsRowFields() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.showAnimation = true;
        return _this;
    }
    DetailsRowFields.prototype.calcWidth = function (column) {
        var cellStyleProps = this.cellStyleProps;
        var width = typeof column.calculatedWidth === 'undefined'
            ? 'auto'
            : column.calculatedWidth +
                cellStyleProps.cellLeftPadding +
                cellStyleProps.cellRightPadding +
                (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0) + 'px';
        return width;
    };
    DetailsRowFields.prototype.render = function (h) {
        var _this = this;
        var _a = this, rowClassNames = _a.rowClassNames, columns = _a.columns, showAnimation = _a.showAnimation, item = _a.item;
        return h('div', {
            class: rowClassNames.fields,
            attrs: { role: 'presentation' },
        }, columns.map(function (column, columnIndex) {
            return h('div', {
                key: columnIndex,
                style: { width: _this.calcWidth(column) },
                class: css(column.className, column.isMultiline && rowClassNames.isMultiline, column.isRowHeader && rowClassNames.isRowHeader, rowClassNames.cell, column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded, showAnimation && rowClassNames.cellAnimation),
                attrs: {
                    role: column.isRowHeader ? 'rowheader' : 'gridcell',
                    ariaReadonly: true,
                },
            }, [
                _this.$scopedSlots["cell.".concat(column.key)]
                    ? _this.$scopedSlots["cell.".concat(column.key)]({ item: item, column: column })
                    : getCellText(item, column),
            ]);
        }));
    };
    __decorate([
        Prop({ type: Object, required: true }),
        __metadata("design:type", Object)
    ], DetailsRowFields.prototype, "rowClassNames", void 0);
    __decorate([
        Prop({ type: Array, required: true }),
        __metadata("design:type", Array)
    ], DetailsRowFields.prototype, "columns", void 0);
    __decorate([
        Prop({ type: Object, required: true }),
        __metadata("design:type", Object)
    ], DetailsRowFields.prototype, "item", void 0);
    __decorate([
        Prop({ type: Number, required: true }),
        __metadata("design:type", Number)
    ], DetailsRowFields.prototype, "itemIndex", void 0);
    __decorate([
        Prop({ type: Object, default: function () { return DEFAULT_CELL_STYLE_PROPS; } }),
        __metadata("design:type", Object)
    ], DetailsRowFields.prototype, "cellStyleProps", void 0);
    DetailsRowFields = __decorate([
        Component
    ], DetailsRowFields);
    return DetailsRowFields;
}(BaseComponent));
export { DetailsRowFields };
//# sourceMappingURL=DetailsRowFields.js.map