Proyectos de Subversion LeadersLinked - SPA

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

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

const MessagesList = ({ messages = [], onLoadMore, loading = false, hasMore = false }) => {
  const [isIntercepting, ref] = useNearScreen({
    once: false,
    rootMargin: '100px'
  });

  const messagesEndRef = useRef(null);

  useEffect(() => {
    if (isIntercepting && onLoadMore) {
      onLoadMore();
    }
  }, [isIntercepting, onLoadMore]);

  useEffect(() => {
    // Scroll to bottom when new messages are added
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const handleReport = ({ url, id }) => {
    // Aquí puedes implementar la lógica de reporte
    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: 'auto',
        bgcolor: 'background.paper'
      }}
    >
      <Box
        sx={{
          flex: 1,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column-reverse',
          p: 1
        }}
      >
        {messages.map((message) => {
          {
            /* if (index === messages.length - 1) {
            return (
              <MessageItem
                key={message.uuid}
                message={message}
                onReport={handleReport}
                ref={messagesEndRef}
              />
            );
          } */
          }

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

        {/* Loading indicator for infinite scroll */}
        {hasMore && (
          <Box ref={ref} sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
            <Spinner size='small' />
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default MessagesList;