Proyectos de Subversion LeadersLinked - SPA

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

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

const MessagesList = ({ messages = [], elementRef, loading = false }) => {
  const messagesEndRef = useRef(null);

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

  const handleReport = ({ url, id }) => {
    console.log('Reportar mensaje:', { url, id });
  };

  if (!messages.length && !loading) {
    return (
      <EmptySection
        Icon={<Inbox />}
        message='No hay mensajes en esta conversación'
        align='center'
      />
    );
  }

  return (
    <Card>
      <CardHeader title='Mensajes' />
      <CardContent>
        <Box
          sx={{
            display: 'flex',
            maxHeight: '60dvh',
            flexDirection: 'column-reverse',
            overflow: 'auto'
          }}
        >
          <div ref={messagesEndRef} />

          {messages.map((message, index) => {
            if (index === messages.length - 1) {
              return (
                <MessageItem
                  elementRef={elementRef}
                  key={message.uuid}
                  message={message}
                  onReport={handleReport}
                />
              );
            }

            return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
          })}

          {loading && (
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                minHeight: '60px'
              }}
            >
              <Spinner size='small' />
            </Box>
          )}
        </Box>
      </CardContent>
    </Card>
  );
};

export default MessagesList;