import React from 'react';
import { Box } from 'ink';
import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
import ToolMessage from './ToolMessage.js';
import { PartListUnion } from '@google/genai';
import ToolConfirmationMessage from './ToolConfirmationMessage.js';

interface ToolGroupMessageProps {
    toolCalls: IndividualToolCallDisplay[];
    onSubmit: (value: PartListUnion) => void;
}

// Main component renders the border and maps the tools using ToolMessage
const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ toolCalls, onSubmit }) => {
    const hasPending = toolCalls.some(t => t.status === ToolCallStatus.Pending);
    const borderColor = hasPending ? "yellow" : "blue";

    return (
        <Box
            flexDirection="column"
            borderStyle="round"
            borderColor={borderColor}
        >
            {toolCalls.map((tool) => {
                return (
                    <React.Fragment key={tool.callId}>
                        <ToolMessage
                            key={tool.callId} // Use callId as the key
                            name={tool.name}
                            description={tool.description}
                            resultDisplay={tool.resultDisplay}
                            status={tool.status}
                        />
                        {tool.status === ToolCallStatus.Confirming && tool.confirmationDetails && (
                            <ToolConfirmationMessage confirmationDetails={tool.confirmationDetails} onSubmit={onSubmit}></ToolConfirmationMessage>
                        )}
                    </React.Fragment>
                );
            })}
            {/* Optional: Add padding below the last item if needed,
                though ToolMessage already has some vertical space implicitly */}
            {/* {tools.length > 0 && <Box height={1} />} */}
        </Box>
    );
};

export default ToolGroupMessage;