import { AnswerPartsView } from "../answer-ui/answer-parts-view";
import { getAnswerPresentation } from "../answer-ui/answer-presentation";
import { hasPendingMessageInput } from "../presentation/message-process-groups";
import type { AgentChatMessage } from "../types";
import { AgentMessageDetails, AgentMessageProgress } from "./agent-message-details";

export function AgentMessageProcessContent({
  messages,
  qaOnly,
  showProgress,
  runningMessageId
}: {
  messages: AgentChatMessage[];
  qaOnly: boolean;
  showProgress: boolean;
  runningMessageId?: string;
}) {
  const progress = messages.flatMap((message) => (message.progress ?? []).map((item) => ({
    ...item, id: JSON.stringify([message.id, item.id])
  })));
  return (
    <>
      {showProgress ? <AgentMessageProgress progress={progress} running={Boolean(runningMessageId)} /> : null}
      {messages.map((message) => {
        const { process } = getAnswerPresentation(message);
        const running = message.id === runningMessageId;
        const showDetails = !qaOnly && !running && !hasPendingMessageInput(message)
          && Boolean(message.todos?.todos.length || message.permissions?.length || message.questions?.length);
        if (!process.length && !showDetails) return null;
        return <div key={message.id} data-agent-process-message-id={message.id} className="space-y-3">
          {process.length > 0 ? (
            <AnswerPartsView parts={process} messageId={`${message.id}-process`} disabled streaming={running} streamDone={!running} />
          ) : null}
          {showDetails ? <AgentMessageDetails message={message} /> : null}
        </div>;
      })}
    </>
  );
}