import { Typography as Typography$1 } from "../../../../../UI/dataDisplay/typography/Typography.mjs";
import { StatusChip } from "../../../../../UI/dataDisplay/status/StatusChip.mjs";
import { Adornment } from "../../../../../UI/components/feedback/Adornment.mjs";
import { AmbientCard } from "../../../../../UI/surfaces/cards/AmbientCard/AmbientCard.mjs";
import { getLocalizedDateTimeString } from "../../../../../UI/widgets/utils/dateUtils.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { makeStyles } from "@material-ui/core";
import { ContactIcon } from "@fluentui/react-icons";
//#region src/udp/pages/UdpTransactionsPage/components/transactionNote/TransactionNote.jsx
const useStyles = makeStyles((theme) => ({
	titleContainer: {
		display: "flex",
		gap: "8px",
		justifyContent: "space-between",
		alignItems: "center"
	},
	chipContainer: {
		display: "flex",
		gap: theme.spacing(1),
		alignItems: "center",
		marginTop: theme.spacing(1)
	},
	card: {
		width: "100%",
		cursor: "pointer",
		"&:hover": { backgroundColor: "rgba(0, 0, 0, 0.04)" },
		padding: "8px 12px",
		border: "1px solid rgba(0, 0, 0, 0.08)"
	},
	captionText: { color: theme.palette.text.hint }
}));
const TransactionNote = (props) => {
	const $ = c(26);
	const { onClick, note } = props;
	const classes = useStyles();
	let t0;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t0 = /* @__PURE__ */ React.createElement(Adornment, { color: "info" });
		$[0] = t0;
	} else t0 = $[0];
	const t1 = classes.card;
	const t2 = classes.titleContainer;
	const t3 = note?.subject ?? "Transaction Note";
	let t4;
	if ($[1] !== t3) {
		t4 = /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, t3);
		$[1] = t3;
		$[2] = t4;
	} else t4 = $[2];
	const t5 = classes.captionText;
	const t6 = note?.createdOn;
	let t7;
	if ($[3] !== t6) {
		t7 = getLocalizedDateTimeString(t6);
		$[3] = t6;
		$[4] = t7;
	} else t7 = $[4];
	let t8;
	if ($[5] !== classes.captionText || $[6] !== t7) {
		t8 = /* @__PURE__ */ React.createElement(Typography$1, {
			variant: "caption",
			className: t5
		}, t7);
		$[5] = classes.captionText;
		$[6] = t7;
		$[7] = t8;
	} else t8 = $[7];
	let t9;
	if ($[8] !== classes.titleContainer || $[9] !== t4 || $[10] !== t8) {
		t9 = /* @__PURE__ */ React.createElement("div", { className: t2 }, t4, t8);
		$[8] = classes.titleContainer;
		$[9] = t4;
		$[10] = t8;
		$[11] = t9;
	} else t9 = $[11];
	const t10 = note?.content ?? "This is a placeholder for the transaction note component.";
	let t11;
	if ($[12] !== t10) {
		t11 = /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, t10);
		$[12] = t10;
		$[13] = t11;
	} else t11 = $[13];
	const t12 = note?.userDisplayName;
	let t13;
	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
		t13 = /* @__PURE__ */ React.createElement(ContactIcon, null);
		$[14] = t13;
	} else t13 = $[14];
	let t14;
	if ($[15] !== t12) {
		t14 = /* @__PURE__ */ React.createElement(StatusChip, {
			label: t12,
			color: "default",
			variant: "outline",
			icon: t13
		});
		$[15] = t12;
		$[16] = t14;
	} else t14 = $[16];
	let t15;
	if ($[17] !== classes.chipContainer || $[18] !== t14) {
		t15 = /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, t14);
		$[17] = classes.chipContainer;
		$[18] = t14;
		$[19] = t15;
	} else t15 = $[19];
	let t16;
	if ($[20] !== classes.card || $[21] !== onClick || $[22] !== t11 || $[23] !== t15 || $[24] !== t9) {
		t16 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientCard, {
			fullWidth: true,
			adornment: "info",
			noAdornment: false,
			customAdornment: t0,
			removeTopLayoutUnit: true,
			removePadding: true,
			lastChildBottomPadding: "0px",
			cardContentHeight: "100%"
		}, /* @__PURE__ */ React.createElement("div", {
			className: t1,
			onClick
		}, t9, t11, t15)));
		$[20] = classes.card;
		$[21] = onClick;
		$[22] = t11;
		$[23] = t15;
		$[24] = t9;
		$[25] = t16;
	} else t16 = $[25];
	return t16;
};
//#endregion
export { TransactionNote };

//# sourceMappingURL=TransactionNote.mjs.map