import { FluentIconButton } from "../../inputs/buttons/FluentIconButton.mjs";
import { TrimForAvatar } from "../../../utilities/TrimForAvatar.mjs";
import { AvatarAlphabet } from "../AvatarAlphabet.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { CardContent, Paper, Typography, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { DeleteIcon } from "@fluentui/react-icons";
import TimeAgo from "timeago-react";
//#region src/UI/dataDisplay/notes/Note.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		width: "100%",
		display: "flex"
	},
	avatar: { marginRight: theme.spacing(2) },
	message: { width: "100%" },
	noteWrapper: { display: "flex" },
	note: { flex: 1 },
	date: { marginTop: theme.spacing(2) }
}));
const Note = (t0) => {
	const $ = c(34);
	const { children, author, date, className, onClick } = t0;
	const classes = useStyles();
	let t1;
	if ($[0] !== className || $[1] !== classes.root) {
		t1 = clsx(classes.root, className);
		$[0] = className;
		$[1] = classes.root;
		$[2] = t1;
	} else t1 = $[2];
	const t2 = classes.avatar;
	let t3;
	if ($[3] !== author) {
		t3 = TrimForAvatar(author);
		$[3] = author;
		$[4] = t3;
	} else t3 = $[4];
	let t4;
	if ($[5] !== t3) {
		t4 = /* @__PURE__ */ React.createElement(AvatarAlphabet, { avatarCharacter: t3 });
		$[5] = t3;
		$[6] = t4;
	} else t4 = $[6];
	let t5;
	if ($[7] !== classes.avatar || $[8] !== t4) {
		t5 = /* @__PURE__ */ React.createElement("div", { className: t2 }, t4);
		$[7] = classes.avatar;
		$[8] = t4;
		$[9] = t5;
	} else t5 = $[9];
	let t6;
	if ($[10] !== children || $[11] !== classes.note) {
		t6 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "body2",
			className: classes.note
		}, children);
		$[10] = children;
		$[11] = classes.note;
		$[12] = t6;
	} else t6 = $[12];
	let t7;
	if ($[13] !== onClick) {
		t7 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
			color: "primary",
			icon: DeleteIcon,
			onClick
		}));
		$[13] = onClick;
		$[14] = t7;
	} else t7 = $[14];
	let t8;
	if ($[15] !== classes.noteWrapper || $[16] !== t6 || $[17] !== t7) {
		t8 = /* @__PURE__ */ React.createElement("div", { className: classes.noteWrapper }, t6, t7);
		$[15] = classes.noteWrapper;
		$[16] = t6;
		$[17] = t7;
		$[18] = t8;
	} else t8 = $[18];
	let t9;
	if ($[19] !== date) {
		t9 = /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, /* @__PURE__ */ React.createElement(TimeAgo, { datetime: date }));
		$[19] = date;
		$[20] = t9;
	} else t9 = $[20];
	let t10;
	if ($[21] !== classes.date || $[22] !== t9) {
		t10 = /* @__PURE__ */ React.createElement("div", { className: classes.date }, t9);
		$[21] = classes.date;
		$[22] = t9;
		$[23] = t10;
	} else t10 = $[23];
	let t11;
	if ($[24] !== t10 || $[25] !== t8) {
		t11 = /* @__PURE__ */ React.createElement(CardContent, null, t8, t10);
		$[24] = t10;
		$[25] = t8;
		$[26] = t11;
	} else t11 = $[26];
	let t12;
	if ($[27] !== classes.message || $[28] !== t11) {
		t12 = /* @__PURE__ */ React.createElement(Paper, {
			elevation: 0,
			className: classes.message
		}, t11);
		$[27] = classes.message;
		$[28] = t11;
		$[29] = t12;
	} else t12 = $[29];
	let t13;
	if ($[30] !== t1 || $[31] !== t12 || $[32] !== t5) {
		t13 = /* @__PURE__ */ React.createElement("div", { className: t1 }, t5, t12);
		$[30] = t1;
		$[31] = t12;
		$[32] = t5;
		$[33] = t13;
	} else t13 = $[33];
	return t13;
};
//#endregion
export { Note };

//# sourceMappingURL=Note.mjs.map