import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { css } from '@uifabric-vue/utilities';
import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles.js';
import BaseComponent from '../../BaseComponent.js';

var getCellText = function(item, column) {
  var value = item && column && column.fieldName ? item[column.fieldName] : "";
  if (value === null || value === void 0) {
    value = "";
  }
  if (typeof value === "boolean") {
    return value.toString();
  }
  return value;
};
var DetailsRowFields = function(_super) {
  __extends(DetailsRowFields2, _super);
  function DetailsRowFields2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.showAnimation = true;
    return _this;
  }
  DetailsRowFields2.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;
  };
  DetailsRowFields2.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)
  ], DetailsRowFields2.prototype, "rowClassNames", void 0);
  __decorate([
    Prop({ type: Array, required: true }),
    __metadata("design:type", Array)
  ], DetailsRowFields2.prototype, "columns", void 0);
  __decorate([
    Prop({ type: Object, required: true }),
    __metadata("design:type", Object)
  ], DetailsRowFields2.prototype, "item", void 0);
  __decorate([
    Prop({ type: Number, required: true }),
    __metadata("design:type", Number)
  ], DetailsRowFields2.prototype, "itemIndex", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
      return DEFAULT_CELL_STYLE_PROPS;
    } }),
    __metadata("design:type", Object)
  ], DetailsRowFields2.prototype, "cellStyleProps", void 0);
  DetailsRowFields2 = __decorate([
    Component
  ], DetailsRowFields2);
  return DetailsRowFields2;
}(BaseComponent);

export { DetailsRowFields };
