import React from 'react'
import { Segment, Message } from 'semantic-ui-react'
import JSONTree from 'react-json-tree'

type Props = {
  loading: boolean,
  expanded: boolean,
  response: any,
  error: ?Error,
}

const Response = ({ loading, expanded, response, error }: Props) => {
  if (loading) {
    return (
      <Segment loading className='result' />
    )
  } else if (error != null) {
    return (
      <Segment className='result'>
        <Message negative>
          <Message.Header>{error.message}</Message.Header>
          <pre>{error.stack}</pre>
        </Message>
      </Segment>
    )
  } else if (response != null) {
    return (
      <Segment className='result'>
        <JSONTree
          hideRoot
          shouldExpandNode={() => expanded}
          data={response}
        />
      </Segment>
    )
  }

  return null
}

export default Response

@@ -36,16 +36,21 @@
 Segment,
+ Tab,
  Message
@@ -73,24 +73,24 @@
 c-ui-react'%0A
-
 import JSONT
@@ -647,39 +647,43 @@
 return (%0A      %3C
-Segment
+Tab%0A       
  className='resu
@@ -677,34 +677,217 @@
 assName='result'
-%3E
 %0A
+        panes=%7B%5B%0A          %7B%0A            menuItem: 'Tree view',%0A            // eslint-disable-next-line react/display-name%0A            render: () =%3E (%0A              %3CTab.Pane%3E%0A        
         %3CJSONTre
@@ -898,16 +898,24 @@
         
+    
+    
 hideRoot
@@ -925,16 +925,24 @@
         
+    
+    
 shouldEx
@@ -977,16 +977,24 @@
         
+        
 data=%7Bre
@@ -1009,16 +1009,24 @@
         
+      
+  
 /%3E%0A     
@@ -1022,33 +1022,363 @@
    /%3E%0A      
-%3C/Segment
+        %3C/Tab.Pane%3E%0A            )%0A          %7D,%0A          %7B%0A            menuItem: 'Raw JSON',%0A            // eslint-disable-next-line react/display-name%0A            render: () =%3E (%0A              %3CTab.Pane%3E%0A                %3Cpre%3E%7BJSON.stringify(response, null, 2)%7D%3C/pre%3E%0A              %3C/Tab.Pane%3E%0A            )%0A          %7D,%0A        %5D%7D%0A      /
 %3E%0A    )%0A  %7D%0A

Add `Raw JSON` pane to response