Proyectos de Subversion LeadersLinked - SPA

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

import { useMessages } from '@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 } = useMessages(
    conversation?.messages_url
  );

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

  if (!messages.length && !loading) {
    return (
      <Typography sx={{ textAlign: 'center' }}>No hay mensajes en esta 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} />
            </Box>
          )}
          renderHeader={() => <div ref={messagesEndRef} />}
          renderFooter={() => loading && <Spinner />}
          style={{ flexDirection: 'column-reverse', maxHeight: '50dvh', overflow: 'auto' }}
        />
      </CardContent>

      <CardActions>
        <ChatForm onSubmit={(message) => sendMessage(conversation?.send_url, message)} />
      </CardActions>
    </Card>
  );
};