import React from 'react';
import { makeStyles } from '@material-ui/core';
import { Card, CardContent, Typography } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        borderRadius: 5,
        background: (props) => (props.message.outgoing ? '#cdecfa' : '#e1e2e3'),
        width: '85%',
        padding: '3px',
        alignSelf: (props) => props.message.outgoing && 'flex-end',
        flexShrink: 0,
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
    },
    userName: {
        fontWeight: 'bold'
    },
    timestamp: {
        color: '#A9A9A9',
        margin: '0 0 0 5px',
    },
}));
export const ChatMessage = (props) => {
    const classes = useStyles(props);
    const { message } = props;
    return (React.createElement(Card, { className: classes.root }, React.createElement(CardContent, null, React.createElement("div", { style: { display: 'flex', flexDirection: 'row' } }, React.createElement(Typography, { noWrap: true, variant: "caption", className: classes.userName }, message.createdBy.name), !message.createdBy.loading && (React.createElement(Typography, { noWrap: true, variant: "caption", className: classes.timestamp }, message.createdAt))), React.createElement("div", { style: { wordWrap: 'break-word' } }, React.createElement(Typography, { variant: "body2", style: { whiteSpace: 'pre-line' } }, message.messageContent)))));
};
//# sourceMappingURL=ChatMessage.js.map