"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_1 = require("../../Link");
var AllComponents_checklist_1 = require("./AllComponents.checklist");
var ComponentStatusState_1 = require("./ComponentStatusState");
var ComponentStatus_1 = require("./ComponentStatus");
require("./ComponentStatusPage.scss");
var ComponentStatusPage = (function (_super) {
    tslib_1.__extends(ComponentStatusPage, _super);
    function ComponentStatusPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ComponentStatusPage.prototype.render = function () {
        var sections = [{ title: 'Badges', section: this._renderStatusesInfo() }, { title: 'Status', section: this._renderComponents() }];
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Components Checklist', componentName: 'Components Checklist', overview: this._renderOverView(), otherSections: sections }));
    };
    ComponentStatusPage.prototype._renderOverView = function () {
        return (React.createElement("div", null, "Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable."));
    };
    ComponentStatusPage.prototype._renderComponents = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("table", { className: 'componentTable' },
                React.createElement("tbody", null, Object.keys(AllComponents_checklist_1.AllComponentsStatus).map(function (componentName, index) {
                    return _this._renderComponent(componentName);
                })))));
    };
    ComponentStatusPage.prototype._renderComponent = function (componentName) {
        var component = AllComponents_checklist_1.AllComponentsStatus[componentName];
        return (React.createElement("tr", { key: componentName + '-key' },
            React.createElement("th", { className: 'componentCells' },
                React.createElement("h3", null,
                    componentName,
                    " "),
                " "),
            React.createElement("td", { className: 'componentBadgeCell' },
                React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, component)))));
    };
    ComponentStatusPage.prototype._renderStatusesInfo = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("table", { className: 'componentTable' },
                React.createElement("tbody", null,
                    React.createElement("tr", null,
                        React.createElement("th", { className: 'componentCells' }, "Name"),
                        React.createElement("th", { className: 'componentCells' }, "Description"),
                        React.createElement("th", { className: 'componentCells' }, "Success")),
                    ComponentStatusState_1.ComponentStatusInfoState.map(function (name) {
                        return _this._renderStatusInfo(name);
                    })))));
    };
    ComponentStatusPage.prototype._renderStatusInfo = function (statusInfo) {
        return (React.createElement("tr", { key: statusInfo.name + '-key' },
            React.createElement("th", { className: 'componentCells' },
                " ",
                statusInfo.name,
                " "),
            React.createElement("td", { className: 'componentCells' },
                " ",
                statusInfo.description,
                " "),
            React.createElement("td", { className: 'componentCells' },
                " ",
                statusInfo.success,
                statusInfo.link && this._createLink(statusInfo.link))));
    };
    ComponentStatusPage.prototype._createLink = function (information) {
        return (React.createElement(Link_1.Link, { href: information.link }, ' ' + information.renderedText));
    };
    return ComponentStatusPage;
}(React.Component));
exports.ComponentStatusPage = ComponentStatusPage;
//# sourceMappingURL=ComponentStatusPage.js.map