import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css } from '../../Utilities';
import { PrimaryButton, DefaultButton, IconButton } from '../../Button';
import { Image, ImageFit } from '../../Image';
import * as stylesImport from './TeachingBubble.scss';
var styles = stylesImport;
var TeachingBubbleContent = /** @class */ (function (_super) {
    tslib_1.__extends(TeachingBubbleContent, _super);
    function TeachingBubbleContent(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {};
        return _this;
    }
    TeachingBubbleContent.prototype.render = function () {
        var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel, hasSmallHeadline = _a.hasSmallHeadline;
        var imageContent;
        var headerContent;
        var bodyContent;
        var footerContent;
        var closeButton;
        if (illustrationImage && illustrationImage.src) {
            imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header ms-TeachingBubble-image' },
                React.createElement(Image, tslib_1.__assign({}, illustrationImage))));
        }
        if (headline) {
            headerContent = (React.createElement("div", { className: css('ms-TeachingBubble-header', hasCondensedHeadline
                    ? 'ms-TeachingBubble-header--condensed ' + styles.headerIsCondensed
                    : hasSmallHeadline
                        ? 'ms-TeachingBubble-header--small ' + styles.headerIsSmall
                        : 'ms-TeachingBubble-header--large ' + styles.headerIsLarge) },
                React.createElement("p", { className: css('ms-TeachingBubble-headline', styles.headline) }, headline)));
        }
        if (this.props.children) {
            bodyContent = (React.createElement("div", { className: css('ms-TeachingBubble-body', styles.body) },
                React.createElement("p", { className: css('ms-TeachingBubble-subText', styles.subText) }, this.props.children)));
        }
        if (primaryButtonProps || secondaryButtonProps) {
            footerContent = (React.createElement("div", { className: css('ms-TeachingBubble-footer', styles.footer) },
                primaryButtonProps && (React.createElement(PrimaryButton, tslib_1.__assign({}, primaryButtonProps, { className: css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))),
                secondaryButtonProps && (React.createElement(DefaultButton, tslib_1.__assign({}, secondaryButtonProps, { className: css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) })))));
        }
        if (hasCloseIcon) {
            closeButton = (React.createElement(IconButton, { className: css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
        }
        return (React.createElement("div", { className: css('ms-TeachingBubble-content', styles.root) },
            imageContent,
            closeButton,
            React.createElement("div", { className: css('ms-TeachingBubble-bodycontent', styles.bodyContent) },
                headerContent,
                bodyContent,
                footerContent)));
    };
    // Specify default props values
    TeachingBubbleContent.defaultProps = {
        hasCondensedHeadline: false,
        imageProps: {
            imageFit: ImageFit.cover,
            width: 364,
            height: 130
        }
    };
    return TeachingBubbleContent;
}(BaseComponent));
export { TeachingBubbleContent };
//# sourceMappingURL=TeachingBubbleContent.js.map