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';

export const MessageItem = ({ message, 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
      }}
    >
      <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>
  );
};