import React from 'react';
import { Avatar, lighten, makeStyles, Typography, Tooltip } from '@material-ui/core';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import clsx from 'clsx';
import TimeAgo from 'timeago-react';
import { AvatarAlphabet } from '../../dataDisplay/AvatarAlphabet';
const useStyles = makeStyles((theme) => ({
    root: {
        marginBottom: theme.spacing(2)
    },
    topRow: {
        display: 'flex'
    },
    desc: {
        marginLeft: theme.spacing(0.5)
    },
    indent: {
        marginLeft: (props) => props.avatarDisplay ? theme.spacing(6) : theme.spacing(4)
    },
    indentChildren: {
        marginLeft: (props) => (props.avatarDisplay ? theme.spacing(2) : 0),
        marginTop: (props) => (props.avatarDisplay ? theme.spacing(-1.5) : 0)
    },
    timestamp: {
        color: lighten(theme.palette.common.black, 0.5),
        marginTop: theme.spacing(-3)
    },
    actionUser: {
        marginRight: 10,
        marginLeft: 11
    },
    activityIcon: {
        marginTop: 2
    },
    action: {
        verticalAlign: 'text-bottom',
        lineHeight: 1.8
    },
    avatar: {
        width: 35,
        height: 35,
        textTransform: 'uppercase'
    }
}));
export const FluentActivity = (props) => {
    const classes = useStyles(props);
    const { activityIcon, avatar, avatarAlt, timeStamp, children, action, actionUser, avatarDisplay } = props;
    const getUser = (userEmail) => {
        var _a;
        const regex = />(.*)</g;
        const matches = regex.exec(userEmail);
        return ((_a = matches[1].trim()) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '?';
    };
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.topRow }, activityIcon && (React.createElement("div", { className: classes.activityIcon }, React.createElement(FluentIcon, { component: activityIcon }))), avatarDisplay && avatar && (React.createElement("div", { className: classes.avatarContainer }, React.createElement(Avatar, { alt: avatarAlt, className: classes.avatar, src: avatar }))), avatarDisplay && !avatar && (React.createElement("div", { className: classes.avatarContainer }, React.createElement(AvatarAlphabet, { alt: avatarAlt, className: classes.avatar, avatarCharacter: getUser(actionUser.props.children[0].props.jsx).toUpperCase() }, getUser(actionUser.props.children[0].props.jsx)))), React.createElement("div", { className: classes.actionUser }, actionUser), React.createElement(Typography, { variant: "caption", className: classes.action }, action)), React.createElement("div", { className: classes.indentChildren }, children), React.createElement("div", { className: classes.time }, React.createElement(Typography, { variant: "caption", className: clsx(classes.indent, classes.timestamp) }, React.createElement(Tooltip, { title: timeStamp }, React.createElement(TimeAgo, { datetime: timeStamp }))))));
};
//# sourceMappingURL=FluentActivity.js.map