import React from 'react';
import Radium from 'radium';
// import _ from 'lodash';
// import Flex from './framework/flex';
import { connect } from 'react-redux';
// import { FOO } from '../actions';
import { visualization } from "../visualization/visualization";

const returnStateNeeded = (fullStateTree) => {
  return {
    metadata: fullStateTree.metadata,
    tree: fullStateTree.tree,
    sequences: fullStateTree.sequences,
    frequencies: fullStateTree.frequencies
  }
}

@connect(returnStateNeeded)
@Radium
class Tree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  static propTypes = {
    /* react */
    // dispatch: React.PropTypes.func,
    params: React.PropTypes.object,
    routes: React.PropTypes.array,
    /* component api */
    style: React.PropTypes.object,
    // foo: React.PropTypes.string
  }
  static defaultProps = {
    // foo: "bar"
  }
  componentDidMount() {
    visualization(
      this.props.tree.tree,
      this.props.sequences.sequences,
      this.props.frequencies.frequencies,
      null /* todo: this is vaccineStrains */
    )
  }
  getStyles() {
    return {
      base: {

      }
    };
  }
  render() {
    const styles = this.getStyles();
    return (
      <div style={[
        styles.base,
        this.props.style
      ]}>
        <p> tree </p>
        <div className="d3-tip se"/>
        <div className="d3-tip e"/>
        <div className="d3-tip"/>
        <div id="date-input"></div>
        <div id="legend-title"></div>
        <div id="legend"></div>
        <select id="coloring">
          <option value="region"> geographic region </option>
        </select>
        <div id="gt-color"></div>
        <div id="branchlabels"></div>
        <div id="region"></div>
        <div id="search"></div>
        <div id="straininput"></div>
        <div id="bp-ac"></div>
        <div id="bp-input"></div>
        <div id="searchinputclear"></div>
        <div id="reset"></div>
        <div className="freqplot-container"></div>
        <div className="treeplot-container" id="treeplot-container"></div>
        <div id="updated"></div>
        <div id="commit"></div>
        <svg id="treeplot"> </svg>
      </div>
    );
  }
}

export default Tree;

@@ -255,16 +255,101 @@
 zation%22;
+%0Aimport d3 from %22d3%22;%0Aimport Link from %22./tree-link%22;%0Aimport Node from %22./tree-node%22;
 %0A%0Aconst 
@@ -1025,16 +1025,19 @@
 () %7B%0A   
+ //
  visuali
@@ -1043,24 +1043,27 @@
 ization(%0A   
+ //
    this.prop
@@ -1075,26 +1075,29 @@
 e.tree,%0A    
+//
   
+ 
 this.props.s
@@ -1119,16 +1119,19 @@
 ces,%0A   
+ //
    this.
@@ -1164,16 +1164,19 @@
 ies,%0A   
+ //
    null 
@@ -1213,16 +1213,19 @@
 s */%0A   
+ //
  )%0A  %7D%0A 
@@ -1292,18 +1292,900 @@
 %7D%0A  
+t
 re
-nder() %7B
+ePlotHeight (width) %7B%0A    return 400 + 0.30 * width;%0A  %7D%0A  drawNodes(nodes) %7B%0A    const nodeComponents = nodes.map((node, index) =%3E %7B%0A      return (%0A        %3CNode%0A          key=%7Bindex%7D%0A          k=%7Bindex%7D%0A          hasChildren=%7Bnode.children ? true : false%7D%0A          name=%7Bnode.name%7D%0A          x=%7Bnode.x%7D%0A          y=%7Bnode.y%7D/%3E%0A      );%0A    %7D);%0A    return nodeComponents;%0A  %7D%0A  drawLinks(links) %7B%0A    const linkComponents = links.map((link, index) =%3E %7B%0A      return (%0A        %3CLink%0A          datum=%7Blink%7D%0A          key=%7Bindex%7D /%3E%0A      );%0A    %7D);%0A    return linkComponents;%0A  %7D%0A  render() %7B%0A%0A    /* static for now, then hand rolled version of https://github.com/digidem/react-dimensions */%0A    const width = 1000;%0A%0A    const tree = d3.layout.tree()%0A      .size(%5Bthis.treePlotHeight(width), width%5D);%0A    const nodes = tree.nodes(this.props.tree.tree);%0A    const links = tree.links(nodes);%0A
 %0A   
@@ -2218,16 +2218,17 @@
 yles();%0A
+%0A
     retu
@@ -3172,23 +3172,260 @@
 %3Csvg
- id=%22treeplot%22%3E
+%0A          height=%7Bthis.treePlotHeight(width)%7D%0A          width=%7Bwidth%7D%0A          id=%22treeplot%22%0A          style=%7B%7B%0A            border: %221px solid rgb(130,130,130)%22%0A          %7D%7D%3E%0A          %7Bthis.drawNodes(nodes)%7D%0A          %7Bthis.drawLinks(links)%7D%0A       
  %3C/s

add react nodes and links to tree, move layout in to tree.jsx