"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var DialogContent_Props_1 = require("./DialogContent.Props");
var Button_1 = require("../../Button");
var DialogFooter_1 = require("./DialogFooter");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var stylesImport = require("./Dialog.scss");
var styles = stylesImport;
var DialogContent = (function (_super) {
    tslib_1.__extends(DialogContent, _super);
    function DialogContent(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            id: Utilities_1.getId('Dialog'),
        };
        return _this;
    }
    DialogContent.prototype.render = function () {
        var _a = this.props, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subText = _a.subText, title = _a.title, type = _a.type;
        var id = this.state.id;
        var groupings = this._groupChildren();
        var subTextContent;
        if (subText) {
            subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
        }
        var contentClassName = Utilities_1.css(this.props.className, (_b = {},
            _b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === DialogContent_Props_1.DialogType.largeHeader,
            _b['ms-Dialog--close ' + styles.isClose] = type === DialogContent_Props_1.DialogType.close,
            _b));
        return (React.createElement("div", { className: Utilities_1.css(contentClassName) },
            React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) },
                React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title),
                React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) },
                    this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, tslib_1.__assign({}, props))); }),
                    showCloseButton && type !== DialogContent_Props_1.DialogType.largeHeader &&
                        React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
            React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) },
                React.createElement("div", { className: Utilities_1.css('ms-Dialog-content', styles.content, this.props.className) },
                    subTextContent,
                    groupings.contents),
                groupings.footers)));
        var _b;
    };
    // @TODO - typing the footers as an array of DialogFooter is difficult because
    // casing "child as DialogFooter" causes a problem because
    // "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
    DialogContent.prototype._groupChildren = function () {
        var groupings = {
            footers: [],
            contents: []
        };
        React.Children.map(this.props.children, function (child) {
            if (typeof child === 'object' && child !== null && child.type === DialogFooter_1.DialogFooter) {
                groupings.footers.push(child);
            }
            else {
                groupings.contents.push(child);
            }
        });
        return groupings;
    };
    return DialogContent;
}(Utilities_1.BaseComponent));
DialogContent.defaultProps = {
    showCloseButton: false,
    className: '',
    topButtonsProps: [],
    closeButtonAriaLabel: 'Close'
};
DialogContent = tslib_1.__decorate([
    withResponsiveMode_1.withResponsiveMode
], DialogContent);
exports.DialogContent = DialogContent;

//# sourceMappingURL=DialogContent.js.map
