import * as tslib_1 from "tslib";
import * as React from 'react';
import { ComponentPage, PageMarkdown } from '@uifabric/example-app-base';
import { Link } from '../../Link';
import { AllComponentsStatus } from './AllComponents.checklist';
import { ComponentStatusInfoState } from './ComponentStatusState';
import { ComponentStatus } from './ComponentStatus';
import './ComponentStatusPage.scss';
var ComponentStatusPage = /** @class */ (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(ComponentPage, { title: "Components Checklist", componentName: "Components Checklist", editOverviewUrl: "https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md", overview: this._renderOverView(), otherSections: sections }));
    };
    ComponentStatusPage.prototype._renderOverView = function () {
        return (React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md')));
    };
    ComponentStatusPage.prototype._renderComponents = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("table", { className: "componentTable" },
                React.createElement("tbody", null, Object.keys(AllComponentsStatus).map(function (componentName, index) {
                    return _this._renderComponent(componentName);
                })))));
    };
    ComponentStatusPage.prototype._renderComponent = function (componentName) {
        var component = 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, 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")),
                    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, { href: information.link }, ' ' + information.renderedText);
    };
    return ComponentStatusPage;
}(React.Component));
export { ComponentStatusPage };
//# sourceMappingURL=ComponentStatusPage.js.map