import React from 'react';
import { useLanguage } from '../../../providers/language/LanguageContext';
import { MessagesProps } from './MessagesTypes';
import { ChatMessage } from './ChatMessages/ChatMessage';
import { LogMessage } from '../Log/LogMessage/LogMessage';
import { AutoScroll } from '../AutoScroll';
import styles from './Messages.module.css';


const Messages: React.FC<MessagesProps> = ({
  messages,
  className = '',
  variant = 'chat',
  showDocuments = true,
  showMetadata = true,
  showProgress = true,
  renderMessage,
  renderDocument,
  emptyMessage,
  onFileDelete,
  onFileRemove,
  onFileView,
  onFileDownload,
  deletingFiles,
  previewingFiles,
  removingFiles,
  downloadingFiles,
  workflowId,
  onMessageDelete,
  deletingMessages
}) => {
  const { t } = useLanguage();
  const resolvedEmptyMessage = emptyMessage || t('Noch keine Nachrichten');
  if (!messages || messages.length === 0) {
    return (
      <div className={`${styles.messagesContainer} ${styles.emptyContainer} ${className}`}>
        <div className={styles.emptyState}>{resolvedEmptyMessage}</div>
      </div>
    );
  }

  return (
    <AutoScroll
      className={className}
      scrollDependency={messages.length}
    >
      <div className={styles.messagesContainer}>
        {messages.map((message, index) => {
        // Use custom render function if provided
        if (renderMessage) {
          return (
            <div key={message.id || index} className={styles.messageWrapper}>
              {renderMessage(message, index)}
            </div>
          );
        }

        // Render based on variant
        if (variant === 'log') {
          return (
            <LogMessage
              key={message.id || index}
              message={message}
              showDocuments={showDocuments}
              showMetadata={showMetadata}
              showProgress={showProgress}
              renderDocument={renderDocument}
              onFileDelete={onFileDelete}
              onFileRemove={onFileRemove}
              onFileView={onFileView}
              onFileDownload={onFileDownload}
              deletingFiles={deletingFiles}
              previewingFiles={previewingFiles}
              removingFiles={removingFiles}
              downloadingFiles={downloadingFiles}
              workflowId={workflowId}
            />
          );
        }

        // Default to chat variant
        return (
          <ChatMessage
            key={message.id || index}
            message={message}
            showDocuments={showDocuments}
            renderDocument={renderDocument}
            onFileDelete={onFileDelete}
            onFileRemove={onFileRemove}
            onFileView={onFileView}
            onFileDownload={onFileDownload}
            deletingFiles={deletingFiles}
            previewingFiles={previewingFiles}
            removingFiles={removingFiles}
            downloadingFiles={downloadingFiles}
            workflowId={workflowId}
            onMessageDelete={onMessageDelete}
            deletingMessages={deletingMessages}
          />
        );
      })}
      </div>
    </AutoScroll>
  );
};

export default Messages;