Proyectos de Subversion LeadersLinked - SPA

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

import { usePagination } from '@shared/hooks';

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

export const MessagesList = ({ conversation, onDelete, onClose }) => {
  const messagesEndRef = useRef(null);

  const {
    items: messages,
    loading,
    elementRef,
    resetPagination
  } = usePagination(conversation?.messages_url);

  const sendMessage = (message) => {
    // TODO: Implementar envío de mensaje
  };

  const handleReport = (message) => {
    // TODO: Implementar reporte de mensaje
  };

  useEffect(() => {
    if (messages.length > 0) {
      messagesEndRef.current?.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
      });
    }
  }, [messages.length]);

  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} onReport={handleReport} />
            </Box>
          )}
          renderHeader={() => <div ref={messagesEndRef} />}
          renderFooter={() => loading && <Spinner size='small' />}
          styles={{ flexDirection: 'column-reverse', maxHeight: '60dvh', overflow: 'auto' }}
        />
      </CardContent>

      {/* <Chat.SubmitForm
        sendUrl={conversation.send_link}
        uploadUrl={conversation.send_link}
        onSubmit={() => scrollToBottom(messagesList)}
      /> */}
    </Card>
  );
};