import { LogDtoSourceEnum } from "@montelo/browser-client";
import { FC } from "react";
import { SourceToMessageMap } from "~/components/traces/MessagesView/SourceToMessageMap";
import { Message, MessagesContainer, Title } from "~/components/traces/MessagesView/styles";
import { CodeBlock } from "./CodeBlock";

type MessagesViewProps = {
  input: any;
  output: any;
  extra?: any;
  inputSource: LogDtoSourceEnum;
  outputSource: LogDtoSourceEnum;
  jsonView: boolean;
  sortAscending: boolean;
};
export const MessagesView: FC<MessagesViewProps> = ({
  input,
  output,
  extra,
  inputSource,
  outputSource,
  jsonView,
  sortAscending,
}) => {
  const { InputComponent } = SourceToMessageMap[inputSource];
  const { OutputComponent } = SourceToMessageMap[outputSource];

  return (
    <MessagesContainer sortAscending={sortAscending}>
      <InputComponent value={input} jsonView={jsonView} sortAscending={sortAscending} />
      <OutputComponent value={output} jsonView={jsonView} sortAscending={sortAscending} />

      {extra && (
        <Message>
          <Title>Extra</Title>
          <CodeBlock value={JSON.stringify(extra, undefined, 2)} />
        </Message>
      )}
    </MessagesContainer>
  );
};
