import React from 'react'
import Tabs from 'react-toolbox/lib/tabs/Tabs'
import Tab from 'react-toolbox/lib/tabs/Tab'
import ClickPath from './ClickPath'
import JSONTree from 'react-json-tree'

class DetailsTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = { index: 0 };
  }
  tabChanged = (index) => {
    this.setState({ index });
  }
  render() {
    let selection = this.props.selection;
    return (
      <section style={{
        backgroundColor: 'lavender',
        height: '100%'
      }}>
        <Tabs inverse fixed
          index={this.state.index}
          onChange={this.tabChanged}>
          <Tab label="Details">
            { selection ? <JSONTree data={selection.data()} /> : "Select Something" }
          </Tab>
          <Tab label="Click Path">
            <ClickPath
              visit={this.props.visit}
              actions={this.props.actions} />
          </Tab>
        </Tabs>
      </section>
      );
  }
}

export default DetailsTabs;

@@ -654,23 +654,26 @@
  label=%22
-Details
+Click Path
 %22%3E%0A     
@@ -696,45 +696,132 @@
 on ?
- %3CJSONTree data=%7Bselection.data()%7D /%3E
+%0A            %3CClickPath%0A              visit=%7Bthis.props.visit%7D%0A              actions=%7Bthis.props.actions%7D /%3E%0A               
  : %22
@@ -827,17 +827,17 @@
 %22Select 
-S
+s
 omething
@@ -875,34 +875,31 @@
 %3CTab label=%22
-Click Path
+Details
 %22%3E%0A         
@@ -905,103 +905,81 @@
     
-%3CClickPath%0A              visit=%7Bthis.props.visit%7D%0A              actions=%7Bthis.props.actions%7D /%3E
+%7B selection ? %3CJSONTree data=%7Bselection.data()%7D /%3E : %22Select something%22 %7D
 %0A   

Put ClickPath as first tab