import { PrimaryActionHeader } from "../../utilityDisplay/utilityHeader/PrimaryActionHeader.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useRef, useState } from "react";
import { Box, Card, Grow, makeStyles } from "@material-ui/core";
import { CancelIcon } from "@fluentui/react-icons";
import { useTranslation } from "react-i18next";
import PhoneImage from "../../../assets/images/phone.png";
//#region src/UI/components/dataDisplay/SmsDisplay.jsx
const useStyles = makeStyles((theme) => ({
	messages: {
		flex: "1",
		margin: "0 20px",
		overflow: "hidden"
	},
	messagesBox: {
		paddingRight: "3%",
		paddingLeft: "3%",
		width: "23vw",
		height: "88%",
		overflowY: "auto",
		boxSizing: "border-box",
		display: "flex",
		justifyContent: "center"
	},
	message: {
		backgroundColor: "#E9E9EB",
		borderRadius: "10px",
		padding: "10px",
		marginBottom: "10px",
		alignSelf: "flex-start",
		overflowWrap: "break-word",
		margin: theme.spacing(1)
	},
	messageSection: {
		flex: "1",
		overflowY: "auto",
		padding: "20px",
		backgroundImage: `url(${PhoneImage})`,
		backgroundSize: "contain",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center",
		position: "relative",
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		height: "calc(100vh - 140px)"
	}
}));
const SmsDisplay = (props) => {
	const $ = c(36);
	const { messages: t0, to, from, title, handleClose } = props;
	let t1;
	if ($[0] !== t0) {
		t1 = t0 === void 0 ? [] : t0;
		$[0] = t0;
		$[1] = t1;
	} else t1 = $[1];
	const messages = t1;
	const classes = useStyles();
	const [messagesList] = useState(messages);
	const { t } = useTranslation();
	const messagesBoxRef = useRef(null);
	let buttons;
	if ($[2] !== handleClose || $[3] !== t) {
		buttons = [];
		if (handleClose) {
			let t2;
			if ($[5] !== t) {
				t2 = t("Close");
				$[5] = t;
				$[6] = t2;
			} else t2 = $[6];
			let t3;
			if ($[7] !== handleClose) {
				t3 = () => handleClose();
				$[7] = handleClose;
				$[8] = t3;
			} else t3 = $[8];
			let t4;
			if ($[9] !== t2 || $[10] !== t3) {
				t4 = {
					label: t2,
					component: CancelIcon,
					click: t3
				};
				$[9] = t2;
				$[10] = t3;
				$[11] = t4;
			} else t4 = $[11];
			buttons.push(t4);
		}
		$[2] = handleClose;
		$[3] = t;
		$[4] = buttons;
	} else buttons = $[4];
	const secondaryButtons = buttons;
	let t2;
	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = () => {
			if (messagesBoxRef.current) messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;
		};
		$[12] = t2;
	} else t2 = $[12];
	let t3;
	if ($[13] !== messagesList) {
		t3 = [messagesList];
		$[13] = messagesList;
		$[14] = t3;
	} else t3 = $[14];
	useEffect(t2, t3);
	const t4 = `To: ${to} . From: ${from}`;
	let t5;
	if ($[15] !== secondaryButtons || $[16] !== t4 || $[17] !== title) {
		t5 = /* @__PURE__ */ React.createElement(Card, { square: true }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
			hidePAB: true,
			title,
			subheader: t4,
			secondaryButtons
		}));
		$[15] = secondaryButtons;
		$[16] = t4;
		$[17] = title;
		$[18] = t5;
	} else t5 = $[18];
	const t6 = classes.messages;
	const t7 = classes.messageSection;
	const t8 = classes.messagesBox;
	let t9;
	if ($[19] !== classes.message || $[20] !== messagesList) {
		let t10;
		if ($[22] !== classes.message) {
			t10 = (message, index) => /* @__PURE__ */ React.createElement(Grow, {
				key: index,
				in: true,
				timeout: 800
			}, /* @__PURE__ */ React.createElement(Box, {
				className: classes.message,
				dangerouslySetInnerHTML: { __html: message }
			}));
			$[22] = classes.message;
			$[23] = t10;
		} else t10 = $[23];
		t9 = messagesList.map(t10);
		$[19] = classes.message;
		$[20] = messagesList;
		$[21] = t9;
	} else t9 = $[21];
	let t10;
	if ($[24] !== classes.messagesBox || $[25] !== t9) {
		t10 = /* @__PURE__ */ React.createElement(Box, {
			className: t8,
			ref: messagesBoxRef
		}, t9);
		$[24] = classes.messagesBox;
		$[25] = t9;
		$[26] = t10;
	} else t10 = $[26];
	let t11;
	if ($[27] !== classes.messageSection || $[28] !== t10) {
		t11 = /* @__PURE__ */ React.createElement(Box, { className: t7 }, t10);
		$[27] = classes.messageSection;
		$[28] = t10;
		$[29] = t11;
	} else t11 = $[29];
	let t12;
	if ($[30] !== classes.messages || $[31] !== t11) {
		t12 = /* @__PURE__ */ React.createElement(Box, { className: t6 }, t11);
		$[30] = classes.messages;
		$[31] = t11;
		$[32] = t12;
	} else t12 = $[32];
	let t13;
	if ($[33] !== t12 || $[34] !== t5) {
		t13 = /* @__PURE__ */ React.createElement(React.Fragment, null, t5, t12);
		$[33] = t12;
		$[34] = t5;
		$[35] = t13;
	} else t13 = $[35];
	return t13;
};
//#endregion
export { SmsDisplay };

//# sourceMappingURL=SmsDisplay.mjs.map