import React, { useEffect, useMemo, useRef, useState } from 'react';
import { makeStyles, Box, Grow, Card } from '@material-ui/core';
import PhoneImage from '../../../assets/images/phone.png';
import { PrimaryActionHeader } from '../../utilityDisplay/utilityHeader/PrimaryActionHeader';
import { useTranslation } from 'react-i18next';
import { CancelIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    messages: {
        flex: '1',
        // height: '100%',
        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)' // Ensures the container takes full viewport height
    }
}));
export const SmsDisplay = (props) => {
    const { messages = [], to, from, title, handleClose } = props;
    const classes = useStyles();
    const [messagesList, setMessagesList] = useState(messages);
    const { t } = useTranslation();
    const messagesBoxRef = useRef(null);
    const secondaryButtons = useMemo(() => {
        const buttons = [];
        if (handleClose) {
            buttons.push({
                label: t('Close'),
                component: CancelIcon,
                click: () => handleClose()
            });
        }
        return buttons;
    }, [t, handleClose]);
    useEffect(() => {
        if (messagesBoxRef.current) {
            messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;
        }
    }, [messagesList]);
    return (React.createElement(React.Fragment, null, React.createElement(Card, { square: true }, React.createElement(PrimaryActionHeader
    //   key={`${selectedNode?.id}-${inSearch}`}
    //   title={headerTitle}
    //   buttonLabel={'Load'}
    //   secondaryButtons={secondaryButtons}
    //   handleClick={handlePrimaryAction}
    //   single
    , { 
        //   key={`${selectedNode?.id}-${inSearch}`}
        //   title={headerTitle}
        //   buttonLabel={'Load'}
        //   secondaryButtons={secondaryButtons}
        //   handleClick={handlePrimaryAction}
        //   single
        hidePAB: true, title: title, subheader: `To: ${to} . From: ${from}`, secondaryButtons: secondaryButtons })), React.createElement(Box, { className: classes.messages }, React.createElement(Box, { className: classes.messageSection }, React.createElement(Box, { className: classes.messagesBox, ref: messagesBoxRef }, messagesList.map((message, index) => (React.createElement(Grow, { key: index, in: true, timeout: 800 }, React.createElement(Box, { className: classes.message, dangerouslySetInnerHTML: { __html: message } })))))))));
};
//# sourceMappingURL=SmsDisplay.js.map