import { React, h, Box, Text } from './plugins.js';

export interface IChatMessage {
  role: 'user' | 'assistant' | 'tool';
  content: string;
  toolName?: string;
  toolInput?: string;
}

interface IMessageProps {
  message: IChatMessage;
}

function truncate(text: string, maxLen: number): string {
  if (text.length <= maxLen) return text;
  return text.substring(0, maxLen) + '...';
}

export function Message({ message }: IMessageProps): React.ReactElement | null {
  switch (message.role) {
    case 'user':
      return h(Box, { marginY: 0 },
        h(Text, { bold: true, color: 'blue' }, 'You: '),
        h(Text, null, message.content),
      );

    case 'assistant':
      return h(Box, { marginY: 0 },
        h(Text, { bold: true, color: 'green' }, 'Assistant: '),
        h(Text, null, message.content),
      );

    case 'tool':
      return h(Box, { marginY: 0, marginLeft: 2, flexDirection: 'column' as const },
        h(Text, { dimColor: true },
          `tool: ${message.toolName}${message.toolInput ? ` (${message.toolInput})` : ''}`,
        ),
        message.content
          ? h(Box, { marginLeft: 2 },
              h(Text, { dimColor: true }, truncate(message.content, 200)),
            )
          : null,
      );

    default:
      return null;
  }
}