import { React, h, Box, Text } from './plugins.js';
import { Message, type IChatMessage } from './components.message.js';

interface IMessageListProps {
  messages: IChatMessage[];
  streamingText: string;
  busy: boolean;
}

export function MessageList({ messages, streamingText, busy }: IMessageListProps): React.ReactElement {
  const children: React.ReactNode[] = [];

  if (messages.length === 0 && !busy) {
    children.push(
      h(Box, { justifyContent: 'center', marginY: 1, key: 'empty' },
        h(Text, { dimColor: true }, 'Type a message to start chatting.'),
      ),
    );
  }

  for (let i = 0; i < messages.length; i++) {
    children.push(h(Message, { key: `msg-${i}`, message: messages[i]! }));
  }

  if (busy && streamingText) {
    children.push(
      h(Box, { marginY: 0, key: 'streaming' },
        h(Text, { bold: true, color: 'green' }, 'Assistant: '),
        h(Text, null, streamingText),
        h(Text, { dimColor: true }, '\u2588'),
      ),
    );
  }

  if (busy && !streamingText) {
    children.push(
      h(Box, { marginY: 0, key: 'spinner' },
        h(Text, { color: 'yellow' }, '\u25CF'),
        h(Text, { dimColor: true }, ' Thinking...'),
      ),
    );
  }

  return h(Box, { flexDirection: 'column' as const, flexGrow: 1 }, ...children);
}