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: '200px'
  });

  const messagesEndRef = useRef(null);

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

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

  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: 'hidden',
        bgcolor: 'background.paper'
      }}
    >
      <Box
        sx={{
          flex: 1,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column-reverse',
          p: 1
        }}
      >
        <div ref={messagesEndRef} />

        {messages.map((message) => (
          <MessageItem key={message.uuid} message={message} onReport={handleReport} />
        ))}

        {hasMore && (
          <Box
            ref={ref}
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              py: 2,
              minHeight: '60px'
            }}
          >
            {loading ? <Spinner size='small' /> : <Box sx={{ height: '20px' }} />}
          </Box>
        )}

        {!hasMore && messages.length > 0 && (
          <Box
            sx={{
              textAlign: 'center',
              py: 2,
              color: 'text.secondary',
              fontSize: '0.875rem'
            }}
          >
            No hay más mensajes
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default MessagesList;