var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../../components/DetailsList/index', '../../../utilities/selection/interfaces', '../../../utilities/object', './PropertiesTable.scss'], function (require, exports, React, index_1, interfaces_1, object_1) {
    "use strict";
    (function (PropertyType) {
        PropertyType[PropertyType["enum"] = 0] = "enum";
        PropertyType[PropertyType["interface"] = 1] = "interface";
    })(exports.PropertyType || (exports.PropertyType = {}));
    var PropertyType = exports.PropertyType;
    var DEFAULT_COLUMNS = [
        {
            key: 'name',
            name: 'Name',
            fieldName: 'name',
            minWidth: 150,
            maxWidth: 250,
            isCollapsable: false,
            isRowHeader: true,
            isResizable: true
        },
        {
            key: 'type',
            name: 'Type',
            fieldName: 'type',
            minWidth: 130,
            maxWidth: 150,
            isCollapsable: false,
            isResizable: true
        },
        {
            key: 'defaultValue',
            name: 'Default value',
            fieldName: 'defaultValue',
            minWidth: 130,
            maxWidth: 150,
            isCollapsable: false,
            isResizable: true
        }, {
            key: 'description',
            name: 'Description',
            fieldName: 'description',
            minWidth: 300,
            maxWidth: 400,
            isCollapsable: false,
            isResizable: true,
            isMultiline: true
        }
    ];
    var ENUM_COLUMNS = [
        {
            key: 'name',
            name: 'Name',
            fieldName: 'name',
            minWidth: 150,
            maxWidth: 250,
            isCollapsable: false,
            isRowHeader: true,
            isResizable: true
        },
        {
            key: 'description',
            name: 'Description',
            fieldName: 'description',
            minWidth: 300,
            maxWidth: 400,
            isCollapsable: false,
            isResizable: true
        }
    ];
    var PropertiesTable = (function (_super) {
        __extends(PropertiesTable, _super);
        function PropertiesTable(props) {
            _super.call(this, props);
            this.state = {
                properties: props.properties
                    .map(function (prop, index) { return object_1.assign({ key: index }, prop); })
                    .sort(function (a, b) { return (a.name < b.name) ? -1 : 1; }),
                isEnum: !!props.renderAsEnum
            };
        }
        PropertiesTable.prototype.render = function () {
            var title = this.props.title;
            var _a = this.state, properties = _a.properties, isEnum = _a.isEnum;
            return (React.createElement("div", {className: 'PropertiesTable'}, React.createElement("h2", {className: 'ms-font-xl'}, title), (properties && properties.length) ? (React.createElement(index_1.DetailsList, {selectionMode: interfaces_1.SelectionMode.none, layoutMode: index_1.DetailsListLayoutMode.justified, items: properties.sort(function (a, b) { return (a.name < b.name) ? -1 : 1; }), columns: isEnum ? ENUM_COLUMNS : DEFAULT_COLUMNS})) : (React.createElement("div", {className: 'PropertiesTable-noProperties'}, "This component is missing properties.Please provide properties or remove the table from the example."))));
        };
        PropertiesTable.defaultProps = {
            title: 'Properties'
        };
        return PropertiesTable;
    }(React.Component));
    exports.PropertiesTable = PropertiesTable;
});
