Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { Box, styled } from '@mui/material'
import { Check } from '@mui/icons-material'
import parse from 'html-react-parser'

import Options from '../UI/Option'

const MessageTemplate = styled(Box)`
  box-shadow: var(--light-shadow);
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  max-width: 70%;
  min-width: 4rem;
  padding: 0.5rem;
  position: relative;
  p {
    color: var(--chat-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  img,
  video {
    max-width: 250px;
    max-height: 250px;
    object-fit: contain;
  }
  svg,
  small {
    color: var(--subtitle-color);
    font-size: 0.8rem;
  }
  .time {
    display: inline-flex;
    gap: 5px;
  }
  .emojione {
    width: 1rem;
    height: 1rem;
  }
`

export default function Message({ message, reportUrl, onReport }) {
  const {
    u,
    type,
    user_name,
    not_received,
    seen,
    id,
    content,
    send,
    contentType,
    time
  } = message
  const options = useMemo(() => {
    const actions = []
    const reportAction = {
      action: () => onReport({ url: reportUrl, id }),
      label: 'Reportar'
    }
    if (reportUrl) actions.push(reportAction)
    return actions
  }, [reportUrl, id])

  const showName = type === 'group' && !u === 1

  const messagesContent = {
    text: <p>{parse(emojione.shortnameToImage(content))}</p>,
    image: <img src={content} alt='chat_image' />,
    video: <video src={content} preload='none' controls />,
    document: (
      <a href={content} download>
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
      </a>
    )
  }

  return (
    <>
      {showName ? <span className='user_name'>{user_name}</span> : null}
      <MessageTemplate
        sx={
          send
            ? {
                alignSelf: 'flex-end',
                backgroundColor: '#eee',
                borderRadius: '10px 0px 10px 10px',
                marginRight: '0.5rem',
                color: '#393939'
              }
            : {
                alignSelf: 'flex-start',
                backgroundColor: 'var(--chat-received)',
                borderRadius: '0 10px 10px 10px',
                marginLeft: '0.5rem'
              }
        }
      >
        {messagesContent[contentType]}

        <small className='time'>
          <Check
            sx={{
              color: seen ? 'blue' : 'gray',
              display: not_received ? 'none' : 'flex'
            }}
          />
          {time}
        </small>

        <Options options={options} right='-2.5rem' />
      </MessageTemplate>
    </>
  )
}