import { FluentIcon } from "../../../utilities/iconLibrary/FluentIcon.mjs";
import { AvatarAlphabet } from "../AvatarAlphabet.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { Avatar, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import TimeAgo from "timeago-react";
//#region src/UI/dataDisplay/FluentActivity/FluentActivity.jsx
const useStyles = makeStyles((theme) => ({
	root: { marginBottom: theme.spacing(2) },
	topRow: { display: "flex" },
	desc: { marginLeft: theme.spacing(.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, .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"
	}
}));
const FluentActivity = (props) => {
	const $ = c(51);
	const classes = useStyles(props);
	const { activityIcon, avatar, avatarAlt, timeStamp, children, action, actionUser, avatarDisplay } = props;
	const getUser = _temp;
	const t0 = classes.root;
	let t1;
	if ($[0] !== activityIcon || $[1] !== classes.activityIcon) {
		t1 = activityIcon && /* @__PURE__ */ React.createElement("div", { className: classes.activityIcon }, /* @__PURE__ */ React.createElement(FluentIcon, { component: activityIcon }));
		$[0] = activityIcon;
		$[1] = classes.activityIcon;
		$[2] = t1;
	} else t1 = $[2];
	let t2;
	if ($[3] !== avatar || $[4] !== avatarAlt || $[5] !== avatarDisplay || $[6] !== classes.avatar || $[7] !== classes.avatarContainer) {
		t2 = avatarDisplay && avatar && /* @__PURE__ */ React.createElement("div", { className: classes.avatarContainer }, /* @__PURE__ */ React.createElement(Avatar, {
			alt: avatarAlt,
			className: classes.avatar,
			src: avatar
		}));
		$[3] = avatar;
		$[4] = avatarAlt;
		$[5] = avatarDisplay;
		$[6] = classes.avatar;
		$[7] = classes.avatarContainer;
		$[8] = t2;
	} else t2 = $[8];
	let t3;
	if ($[9] !== actionUser || $[10] !== avatar || $[11] !== avatarAlt || $[12] !== avatarDisplay || $[13] !== classes.avatar || $[14] !== classes.avatarContainer) {
		t3 = avatarDisplay && !avatar && /* @__PURE__ */ React.createElement("div", { className: classes.avatarContainer }, /* @__PURE__ */ React.createElement(AvatarAlphabet, {
			alt: avatarAlt,
			className: classes.avatar,
			avatarCharacter: getUser(actionUser.props.children[0].props.jsx).toUpperCase()
		}, getUser(actionUser.props.children[0].props.jsx)));
		$[9] = actionUser;
		$[10] = avatar;
		$[11] = avatarAlt;
		$[12] = avatarDisplay;
		$[13] = classes.avatar;
		$[14] = classes.avatarContainer;
		$[15] = t3;
	} else t3 = $[15];
	let t4;
	if ($[16] !== actionUser || $[17] !== classes.actionUser) {
		t4 = /* @__PURE__ */ React.createElement("div", { className: classes.actionUser }, actionUser);
		$[16] = actionUser;
		$[17] = classes.actionUser;
		$[18] = t4;
	} else t4 = $[18];
	let t5;
	if ($[19] !== action || $[20] !== classes.action) {
		t5 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			className: classes.action
		}, action);
		$[19] = action;
		$[20] = classes.action;
		$[21] = t5;
	} else t5 = $[21];
	let t6;
	if ($[22] !== classes.topRow || $[23] !== t1 || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5) {
		t6 = /* @__PURE__ */ React.createElement("div", { className: classes.topRow }, t1, t2, t3, t4, t5);
		$[22] = classes.topRow;
		$[23] = t1;
		$[24] = t2;
		$[25] = t3;
		$[26] = t4;
		$[27] = t5;
		$[28] = t6;
	} else t6 = $[28];
	let t7;
	if ($[29] !== children || $[30] !== classes.indentChildren) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: classes.indentChildren }, children);
		$[29] = children;
		$[30] = classes.indentChildren;
		$[31] = t7;
	} else t7 = $[31];
	const t8 = classes.time;
	let t9;
	if ($[32] !== classes.indent || $[33] !== classes.timestamp) {
		t9 = clsx(classes.indent, classes.timestamp);
		$[32] = classes.indent;
		$[33] = classes.timestamp;
		$[34] = t9;
	} else t9 = $[34];
	let t10;
	if ($[35] !== timeStamp) {
		t10 = /* @__PURE__ */ React.createElement(TimeAgo, { datetime: timeStamp });
		$[35] = timeStamp;
		$[36] = t10;
	} else t10 = $[36];
	let t11;
	if ($[37] !== t10 || $[38] !== timeStamp) {
		t11 = /* @__PURE__ */ React.createElement(Tooltip, { title: timeStamp }, t10);
		$[37] = t10;
		$[38] = timeStamp;
		$[39] = t11;
	} else t11 = $[39];
	let t12;
	if ($[40] !== t11 || $[41] !== t9) {
		t12 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			className: t9
		}, t11);
		$[40] = t11;
		$[41] = t9;
		$[42] = t12;
	} else t12 = $[42];
	let t13;
	if ($[43] !== classes.time || $[44] !== t12) {
		t13 = /* @__PURE__ */ React.createElement("div", { className: t8 }, t12);
		$[43] = classes.time;
		$[44] = t12;
		$[45] = t13;
	} else t13 = $[45];
	let t14;
	if ($[46] !== classes.root || $[47] !== t13 || $[48] !== t6 || $[49] !== t7) {
		t14 = /* @__PURE__ */ React.createElement("div", { className: t0 }, t6, t7, t13);
		$[46] = classes.root;
		$[47] = t13;
		$[48] = t6;
		$[49] = t7;
		$[50] = t14;
	} else t14 = $[50];
	return t14;
};
function _temp(userEmail) {
	return />(.*)</g.exec(userEmail)[1].trim()?.charAt(0) || "?";
}
//#endregion
export { FluentActivity };

//# sourceMappingURL=FluentActivity.mjs.map