import React from "react";
import ReactJson from "react-json-view";
import JSONParse from "json-parse-safe";
import { Code } from "@chakra-ui/core";

export default function JSONTree({ src, contentType = "" }) {
  if (contentType.match(/json/)) {
    const { value } = JSONParse(src);

    if (!value) {
      return <PlainCode src={src} />;
    }

    return (
      <ReactJson
        src={value}
        enableClipboard={false}
        theme="hopscotch"
        name={false}
        displayDataTypes={false}
        style={{
          padding: "12px",
          paddingLeft: "16px",
          fontFamily: "monospace",
          fontSize: "1.3rem",
          lineHeight: "1.25",
          borderRadius: "8px"
        }}
      />
    );
  }

  return <PlainCode src={src} />;
}

function PlainCode({ src }) {
  return (
    <Code whiteSpace="pre-wrap" px="6" py="4" w="full">
      {src}
    </Code>
  );
}

@@ -111,20 +111,22 @@
 mport %7B 
-Code
+styled
  %7D from 
@@ -130,24 +130,113 @@
 om %22
-@chakra-ui/core%22
+baseui%22;%0A%0Aconst Pre = styled(%22pre%22, (%7B $theme %7D) =%3E (%7B%0A  backgroundColor: $theme.colors.backgroundInv%0A%7D))
 ;%0A%0Ae
@@ -403,36 +403,29 @@
 eturn %3CP
-lainCode src=%7Bsrc%7D /
+re%3E%7Bsrc%7D%3C/Pre
 %3E;%0A    %7D
@@ -835,158 +835,22 @@
 n %3CP
-lainCode src=%7Bsrc%7D /%3E;%0A%7D%0A%0Afunction PlainCode(%7B src %7D) %7B%0A  return (%0A    %3CCode whiteSpace=%22pre-wrap%22 px=%226%22 py=%224%22 w=%22full%22%3E%0A      %7Bsrc%7D%0A    %3C/Code%3E%0A  )
+re%3E%7Bsrc%7D%3C/Pre%3E
 ;%0A%7D%0A

update jsontree component