Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Typography } from '@mui/material';

import { useMessages } from '@inmail/hooks';

import {
  Card,
  CardActions,
  CardContent,
  CardHeader,
  List,
  Menu,
  Spinner
} from '@shared/components';
import { MessageItem } from './MessageItem';
import { ChatForm } from '../chat';

export const MessagesList = ({ conversation, onDelete, onClose }) => {
  const { messages, loading, messagesEndRef, elementRef, sendMessage, reportMessage } =
    useMessages(conversation);

  if (!conversation) {
    return <Typography sx={{ textAlign: 'center' }}>Selecciona una conversación</Typography>;
  }

  return (
    <Card>
      <CardHeader
        title={conversation.name}
        renderAction={() => (
          <Menu>
            {onDelete && <Menu.Item onClick={onDelete}>Borrar convesación</Menu.Item>}
            <Menu.Item onClick={onClose}>Cerrar conversación</Menu.Item>
          </Menu>
        )}
      />
      <CardContent>
        <List
          items={messages}
          keyExtractor={(message) => message.uuid}
          emptyMessage='No hay mensajes en esta conversación'
          renderItem={(message, index) => (
            <Box ref={index === messages.length - 1 ? elementRef : null}>
              <MessageItem message={message} onReport={(uuid) => reportMessage(uuid)} />
            </Box>
          )}
          renderHeader={() => <div ref={messagesEndRef} />}
          renderFooter={() => loading && <Spinner />}
          style={{ flexDirection: 'column-reverse', maxHeight: '50dvh', overflow: 'auto' }}
        />
      </CardContent>

      <CardActions>
        <ChatForm onSubmit={sendMessage} />
      </CardActions>
    </Card>
  );
};