Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Box, Avatar, Typography, IconButton, Menu, MenuItem } from '@mui/material';

import { MoreVert, Report } from '@mui/icons-material';

const MessageItem = ({ message, elementRef, onReport }) => {

  const [anchorEl, setAnchorEl] = React.useState(null);

  const open = Boolean(anchorEl);

  const handleClick = (event) => {

    setAnchorEl(event.currentTarget);

  };

  const handleClose = () => {

    setAnchorEl(null);

  };

  const handleReport = () => {

    if (message.url_abuse_report) {

      onReport({ url: message.url_abuse_report, id: message.uuid });

    }

    handleClose();

  };

  const renderMessageContent = () => {

    switch (message.type) {

      case 'text':

        return (

          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>

            {message.message}

          </Typography>

        );

      case 'image':

        return (

          <Box sx={{ maxWidth: '250px', maxHeight: '250px' }}>

            <img

              src={message.filename}

              alt='Mensaje de imagen'

              style={{

                width: '100%',

                height: 'auto',

                borderRadius: '8px',

                objectFit: 'cover'

              }}

            />

          </Box>

        );

      case 'document':

        return (

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

            <img

              src='/images/extension/pdf.png'

              alt='Documento'

              style={{ width: '24px', height: '24px' }}

            />

            <Typography variant='body2' component='a' href={message.filename} download>

              Descargar documento

            </Typography>

          </Box>

        );

      default:

        return (

          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>

            {message.message || 'Contenido no disponible'}

          </Typography>

        );

    }

  };

  return (

    <Box

      sx={{

        display: 'flex',

        justifyContent: message.side === 'right' ? 'flex-end' : 'flex-start',

        mb: 1,

        px: 1

      }}

      ref={elementRef}

    >

      <Box

        sx={{

          display: 'flex',

          flexDirection: 'column',

          maxWidth: '70%',

          position: 'relative'

        }}

      >

        {message.side === 'left' && (

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>

            <Avatar

              src={message.sender_image}

              alt={message.sender_name}

              sx={{ width: 24, height: 24 }}

            />

            <Typography variant='caption' color='text.secondary'>

              {message.sender_name}

            </Typography>

          </Box>

        )}

        <Box

          sx={{

            backgroundColor: message.side === 'right' ? 'primary.main' : 'grey.100',

            color: message.side === 'right' ? 'white' : 'text.primary',

            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',

            padding: 1.5,

            position: 'relative',

            '&:hover .message-actions': {

              opacity: 1

            }

          }}

        >

          {renderMessageContent()}

          <Box

            sx={{

              display: 'flex',

              justifyContent: 'space-between',

              alignItems: 'center',

              mt: 0.5,

              gap: 1

            }}

          >

            <Typography variant='caption' color='text.secondary'>

              {message.date}

            </Typography>

            {message.url_abuse_report && (

              <IconButton

                size='small'

                onClick={handleClick}

                className='message-actions'

                sx={{

                  opacity: 0,

                  transition: 'opacity 0.2s',

                  color: 'inherit'

                }}

              >

                <MoreVert fontSize='small' />

              </IconButton>

            )}

          </Box>

        </Box>

      </Box>

      <Menu

        anchorEl={anchorEl}

        open={open}

        onClose={handleClose}

        anchorOrigin={{

          vertical: 'top',

          horizontal: 'right'

        }}

        transformOrigin={{

          vertical: 'top',

          horizontal: 'left'

        }}

      >

        <MenuItem onClick={handleReport}>

          <Report fontSize='small' sx={{ mr: 1 }} />

          Reportar mensaje

        </MenuItem>

      </Menu>

    </Box>

  );

};

export default MessageItem;