"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Dialog_Props_1 = require("./Dialog.Props");
var Modal_1 = require("../../Modal");
var Button_1 = require("../../Button");
var DialogFooter_1 = require("./DialogFooter");
var withResponsiveMode_1 = require("../../utilities/decorators/withResponsiveMode");
var styles = require("./Dialog.scss");
var Dialog = (function (_super) {
    __extends(Dialog, _super);
    function Dialog(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            id: Utilities_1.getId('Dialog'),
        };
        return _this;
    }
    Dialog.prototype.render = function () {
        var _a = this.props, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type;
        var id = this.state.id;
        var subTextContent;
        var dialogClassName = Utilities_1.css(this.props.className, (_b = {},
            _b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === Dialog_Props_1.DialogType.largeHeader,
            _b['ms-Dialog--close ' + styles.isClose] = type === Dialog_Props_1.DialogType.close,
            _b));
        var containerClassName = Utilities_1.css(this.props.containerClassName, styles.main);
        var groupings = this._groupChildren();
        if (subText) {
            subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
        }
        return (React.createElement(Modal_1.Modal, { className: dialogClassName, containerClassName: containerClassName, elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isBlocking: isBlocking, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, isDarkOverlay: isDarkOverlay, isOpen: isOpen, onDismiss: onDismiss, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode, subtitleAriaId: subText && id + '-subText', titleAriaId: title && id + '-title' },
            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, __assign({}, props))); }),
                    React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button, (_c = {}, _c[styles.isClose] = isBlocking || type === Dialog_Props_1.DialogType.largeHeader, _c)), 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.contentClassName) },
                    subTextContent,
                    groupings.contents),
                groupings.footers)));
        var _b, _c;
    };
    // @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."
    Dialog.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 Dialog;
}(Utilities_1.BaseComponent));
Dialog.defaultProps = {
    isOpen: false,
    type: Dialog_Props_1.DialogType.normal,
    isDarkOverlay: true,
    isBlocking: false,
    className: '',
    containerClassName: '',
    contentClassName: '',
    topButtonsProps: []
};
Dialog = __decorate([
    withResponsiveMode_1.withResponsiveMode
], Dialog);
exports.Dialog = Dialog;

//# sourceMappingURL=Dialog.js.map
