import * as React from "react";
import * as classNames from "classnames";
import * as FontAwesome from "react-fontawesome";
import { FlexBox } from "../";
import "./MessageMetadata.less";
function cssClass(element) {
    return "MessageMetadata--" + element;
}
export var MessageMetadata = React.forwardRef(function (props, ref) {
    var className = props.className, placement = props.placement, readStatusText = props.readStatusText, children = props.children, errorMsg = props.errorMsg;
    return (React.createElement("div", { ref: ref, className: classNames(cssClass("Message--container"), className) },
        React.createElement("div", { className: cssClass("Message--" + placement) }, children),
        readStatusText && React.createElement("div", { className: cssClass("ReadReceipt") }, readStatusText),
        errorMsg && formErrorContainer(errorMsg, placement)));
});
function formErrorContainer(errorMsg, placement) {
    return (React.createElement(FlexBox, { className: classNames(cssClass("Error"), cssClass("Error--" + placement)), grow: true, alignItems: "center" },
        React.createElement("div", { className: cssClass("ErrorContents") },
            React.createElement(FontAwesome, { className: cssClass("Error--Icon"), name: "exclamation-circle " }),
            errorMsg)));
}
