import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, customizable, } from '../../Utilities';
import { DialogType, } from './DialogContent.types';
import { IconButton } from '../../Button';
import { DialogFooter } from './DialogFooter';
import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
var getClassNames = classNamesFunction();
var DialogContentBase = /** @class */ (function (_super) {
    tslib_1.__extends(DialogContentBase, _super);
    function DialogContentBase(props) {
        return _super.call(this, props) || this;
    }
    DialogContentBase.prototype.render = function () {
        var _a = this.props, showCloseButton = _a.showCloseButton, className = _a.className, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subTextId = _a.subTextId, subText = _a.subText, titleId = _a.titleId, title = _a.title, type = _a.type, getStyles = _a.getStyles, theme = _a.theme;
        var classNames = getClassNames(getStyles, {
            theme: theme,
            className: className,
            isLargeHeader: type === DialogType.largeHeader,
            isClose: type === DialogType.close,
        });
        var groupings = this._groupChildren();
        var subTextContent;
        if (subText) {
            subTextContent = React.createElement("p", { className: classNames.subText, id: subTextId }, subText);
        }
        return (React.createElement("div", { className: classNames.content },
            React.createElement("div", { className: classNames.header },
                React.createElement("p", { className: classNames.title, id: titleId, role: 'heading', "aria-level": 1 }, title),
                React.createElement("div", { className: classNames.topButton },
                    this.props.topButtonsProps.map(function (props) { return (React.createElement(IconButton, tslib_1.__assign({}, props))); }),
                    (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) &&
                        React.createElement(IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
            React.createElement("div", { className: classNames.inner },
                React.createElement("div", { className: classNames.innerContent },
                    subTextContent,
                    groupings.contents),
                groupings.footers)));
    };
    // @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."
    DialogContentBase.prototype._groupChildren = function () {
        var groupings = {
            footers: [],
            contents: []
        };
        React.Children.map(this.props.children, function (child) {
            if (typeof child === 'object' && child !== null && child.type === DialogFooter) {
                groupings.footers.push(child);
            }
            else {
                groupings.contents.push(child);
            }
        });
        return groupings;
    };
    DialogContentBase.defaultProps = {
        showCloseButton: false,
        className: '',
        topButtonsProps: [],
        closeButtonAriaLabel: 'Close'
    };
    DialogContentBase = tslib_1.__decorate([
        customizable('DialogContent', ['theme']),
        withResponsiveMode
    ], DialogContentBase);
    return DialogContentBase;
}(BaseComponent));
export { DialogContentBase };
//# sourceMappingURL=DialogContent.base.js.map