Proyectos de Subversion LeadersLinked - SPA

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

import { Spinner } from '@shared/components';
import EmptySection from '@components/UI/EmptySection';
import MessageItem from './MessageItem';

const MessagesList = ({ messages = [], lastElementRef, 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 (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        overflow: 'hidden',
        bgcolor: 'background.paper'
      }}
    >
      <Box
        sx={{
          flex: 1,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column-reverse',
          p: 1
        }}
      >
        <div ref={messagesEndRef} />

        {messages.map((message, index) => {
          if (index === messages.length - 1) {
            return (
              <MessageItem
                ref={lastElementRef}
                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',
              py: 2,
              minHeight: '60px'
            }}
          >
            <Spinner size='small' />
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default MessagesList;