import React, { Fragment, useContext } from 'react';
import classnames from 'classnames';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import { UsersContext } from '../../../contexts/UsersContext';
import { processMentions } from '../../helpers';
import { useStyles } from './styles';
export var CommentContent = function (_a) {
    var comment = _a.comment, className = _a.className;
    var styles = useStyles();
    var users = useContext(UsersContext);
    return (React.createElement(Typography, { className: classnames(styles.root, className) }, processMentions(comment.content, comment.namedUsers, function (mention) {
        var user = users.find(function (user) { return user.username === mention.slice(1); });
        return user ? (React.createElement(Link, { href: "mailto:".concat(user.email), underline: "hover" }, mention)) : (mention);
    }).map(function (el, idx) { return (React.createElement(Fragment, { key: idx }, el)); })));
};
