{"version":3,"file":"SmsDisplay.mjs","names":["React","useEffect","useMemo","useRef","useState","makeStyles","Box","Grow","Card","PhoneImage","PrimaryActionHeader","useTranslation","CancelIcon","useStyles","theme","messages","flex","margin","overflow","messagesBox","paddingRight","paddingLeft","width","height","overflowY","boxSizing","display","justifyContent","message","backgroundColor","borderRadius","padding","marginBottom","alignSelf","overflowWrap","spacing","messageSection","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","position","alignItems","SmsDisplay","props","$","_c","t0","to","from","title","handleClose","t1","undefined","classes","messagesList","t","messagesBoxRef","buttons","t2","defaultValue","t3","t4","label","component","click","push","secondaryButtons","Symbol","for","current","scrollTop","scrollHeight","t5","t6","t7","t8","t9","t10","index","__html","map","t11","t12","t13"],"sources":["../../../../src/UI/components/dataDisplay/SmsDisplay.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { makeStyles, Box, Grow, Card } from '@material-ui/core';\nimport PhoneImage from '../../../assets/images/phone.png';\nimport { PrimaryActionHeader } from '../../utilityDisplay/utilityHeader/PrimaryActionHeader';\nimport { useTranslation } from 'react-i18next';\nimport { CancelIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  messages: {\n    flex: '1',\n    // height: '100%',\n    margin: '0 20px',\n    overflow: 'hidden'\n  },\n  messagesBox: {\n    paddingRight: '3%',\n    paddingLeft: '3%',\n    width: '23vw',\n    height: '88%',\n    overflowY: 'auto',\n    boxSizing: 'border-box',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  message: {\n    backgroundColor: '#E9E9EB',\n    borderRadius: '10px',\n    padding: '10px',\n    marginBottom: '10px',\n    alignSelf: 'flex-start',\n    overflowWrap: 'break-word',\n    margin: theme.spacing(1)\n  },\n  messageSection: {\n    flex: '1',\n    overflowY: 'auto',\n    padding: '20px',\n    backgroundImage: `url(${PhoneImage})`,\n    backgroundSize: 'contain',\n    backgroundRepeat: 'no-repeat',\n    backgroundPosition: 'center',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: 'calc(100vh - 140px)' // Ensures the container takes full viewport height\n  }\n}));\n\nexport const SmsDisplay = (props) => {\n  const { messages = [], to, from, title, handleClose } = props;\n  const classes = useStyles();\n  const [messagesList, setMessagesList] = useState(messages);\n  const { t } = useTranslation();\n\n  const messagesBoxRef = useRef(null);\n\n  const secondaryButtons = useMemo(() => {\n    const buttons = [];\n    if (handleClose) {\n      buttons.push({\n        label: t('common.close', { defaultValue: 'Close' }),\n        component: CancelIcon,\n        click: () => handleClose()\n      });\n    }\n    return buttons;\n  }, [t, handleClose]);\n\n  useEffect(() => {\n    if (messagesBoxRef.current) {\n      messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;\n    }\n  }, [messagesList]);\n\n  return (\n    <>\n      <Card square>\n        <PrimaryActionHeader\n          //   key={`${selectedNode?.id}-${inSearch}`}\n          //   title={headerTitle}\n          //   buttonLabel={'Load'}\n          //   secondaryButtons={secondaryButtons}\n          //   handleClick={handlePrimaryAction}\n          //   single\n          hidePAB={true}\n          title={title}\n          subheader={t('ui.display.toFrom', {\n            defaultValue: 'To: {{to}} . From: {{from}}',\n            to,\n            from\n          })}\n          secondaryButtons={secondaryButtons}\n        />\n      </Card>\n      <Box className={classes.messages}>\n        <Box className={classes.messageSection}>\n          <Box className={classes.messagesBox} ref={messagesBoxRef}>\n            {messagesList.map((message, index) => (\n              <Grow key={index} in={true} timeout={800}>\n                <Box\n                  className={classes.message}\n                  dangerouslySetInnerHTML={{ __html: message }}\n                />\n              </Grow>\n            ))}\n          </Box>\n        </Box>\n      </Box>\n    </>\n  );\n};\n"],"mappings":"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"}