import classNames from 'classnames';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
import type { HttpResponse } from '@yaakapp/api';
import { JsonAttributeTree } from '../core/JsonAttributeTree';

interface Props {
  response: HttpResponse;
  className?: string;
}

export function JsonViewer({ response, className }: Props) {
  const rawBody = useResponseBodyText(response);

  if (rawBody.isLoading || rawBody.data == null) return null;

  let parsed = {};
  try {
    parsed = JSON.parse(rawBody.data);
  } catch (e) {
    // Nothing yet
  }

  return (
    <div className={classNames(className, 'overflow-x-auto h-full')}>
      <JsonAttributeTree attrValue={parsed} />
    </div>
  );
}