import React from "react";
import Radium from "radium";
import titleCase from "title-case";
// import d3 from "d3";
// import _ from "lodash";
// import Flex from "./framework/flex";
import { connect } from "react-redux";
import { LEGEND_ITEM_MOUSEENTER, LEGEND_ITEM_MOUSELEAVE } from "../../actions/controls";

@connect()
@Radium
class LegendItem 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,
    legendRectSize: React.PropTypes.number,
    legendSpacing: React.PropTypes.number,
    rectFill: React.PropTypes.string,
    rectStroke: React.PropTypes.string,
    transform: React.PropTypes.string,
    dFreq: React.PropTypes.bool,
    label: React.PropTypes.string
  }
  static defaultProps = {
    // foo: "bar"
  }

  getStyles() {
    return {
      base: {

      }
    };
  }
  createLabelText(d) {
    // We assume that label text arrives either Properly Formatted or as snake_case or as CamelCase
    let label = "";
    // d was undefined in some cases, Honduras thing, may not need conditional after fixed
    if (d) {
      label = titleCase(d.toString());
    }

    if (this.props.dFreq) {
      label += "\u00D7";
    }
    return label;
  }
  render() {
    const label = this.createLabelText(this.props.label);
    return (
      <g
        transform={this.props.transform}
        onMouseEnter={() => {
          this.props.dispatch({ type: LEGEND_ITEM_MOUSEENTER, data: this.props.label });
        }}
        onMouseLeave={() => {
          this.props.dispatch({ type: LEGEND_ITEM_MOUSELEAVE });
        }}>
        <rect
          style={{strokeWidth: 2}}
          width={this.props.legendRectSize}
          height={this.props.legendRectSize}
          fill={this.props.rectFill}
          stroke={this.props.rectStroke}/>
        <text
          x={this.props.legendRectSize + this.props.legendSpacing + 5}
          y={this.props.legendRectSize - this.props.legendSpacing}
          style={{fontSize: 12}}>{label}</text>
      </g>
    );
  }
}

export default LegendItem;





/*
// THIS IS FROM LEGEND ITEM - execute based on control value for hover on legend
// .on("mouseover", (leg) => {
//   treeplot.selectAll(".tip")
//     .filter((d) => {return legend_match(leg, d);})
//     .attr("r", (d) => {return tipRadius(d) * 1.7;})
//     .style("fill", (t) => {
//       return d3.rgb(tipFillColor(t)).brighter();
//     });
// })
// .on("mouseout", (leg) => {
//   treeplot.selectAll(".tip")
//     .filter((d) => {return legend_match(leg, d);})
//     .attr("r", (d) => {return tipRadius(d); })
//     .style("fill", (t) => {
//       return d3.rgb(tipFillColor(t));
//     });
// });
// END FROM LEGEND ITEM

  */

@@ -2250,651 +2250,4 @@
 em;%0A
-%0A%0A%0A%0A%0A/*%0A// THIS IS FROM LEGEND ITEM - execute based on control value for hover on legend%0A// .on(%22mouseover%22, (leg) =%3E %7B%0A//   treeplot.selectAll(%22.tip%22)%0A//     .filter((d) =%3E %7Breturn legend_match(leg, d);%7D)%0A//     .attr(%22r%22, (d) =%3E %7Breturn tipRadius(d) * 1.7;%7D)%0A//     .style(%22fill%22, (t) =%3E %7B%0A//       return d3.rgb(tipFillColor(t)).brighter();%0A//     %7D);%0A// %7D)%0A// .on(%22mouseout%22, (leg) =%3E %7B%0A//   treeplot.selectAll(%22.tip%22)%0A//     .filter((d) =%3E %7Breturn legend_match(leg, d);%7D)%0A//     .attr(%22r%22, (d) =%3E %7Breturn tipRadius(d); %7D)%0A//     .style(%22fill%22, (t) =%3E %7B%0A//       return d3.rgb(tipFillColor(t));%0A//     %7D);%0A// %7D);%0A// END FROM LEGEND ITEM%0A%0A  */%0A

remove old code from legend component