import React, {Component, PropTypes} from 'react';
import LiquidGauge from './LiquidGauge';

export default class Gauge extends Component {
  static propTypes = {
    label: PropTypes.string.required,
    value: PropTypes.number.required,
    units: PropTypes.string,
    topLabel: PropTypes.bool
  };

  static style = {
    container: {
      position: 'relative',
      minWidth: 100,
      maxWidth: 200,
      minHeight: 100,
      border: '1px solid black',
      borderRadius: 4,
      boxShadow: '2px 2px 3px #383838',
      padding: '5px 5px',
      margin: 0,
      backgroundColor: '#484848',
      color: '#eee',
      textAlign: 'center',
      lineHeight: 1,
      fontFamily: 'sans-serif'
    },
    value: {
      fontSize: '3em',
      margin: 0,
      overflow: 'hidden'
    },
    units: {
      textAlign: 'right',
      marginTop: -5
    },
    label: {
      fontSize: '1.75em',
      width: '100%',
      maxWidth: 200,
      textAlign: 'center',
      marginTop: 15
    },
    button: {
      position: 'absolute',
      bottom: 5,
      right: 5,
      cursor: 'pointer'
    }
  };

  constructor(props) {
    super(props);
    this.state = {reverse: false, width: 212};
  }

  componentDidMount() {
    this.setState({width: React.findDOMNode(this).offsetWidth});
  }

  componentWillReceiveProps(nextProps) {
    let history = this.state.history || new Array(100).fill(0);

    if(history.length > 100) history.shift();

    history.push(nextProps.value);

    this.setState({
      history: history,
      width: React.findDOMNode(this).offsetWidth
    });
  }

  handleClick() {
    if(this.state && this.state.reverse) {
      this.setState({reverse: false});
    } else {
      this.setState({reverse: true});
    }
  }

  renderObverse() {
    return (
      <div>
        <LiquidGauge value={this.props.value}
          waveAnimateTime={2000}
          waveHeight={0.075}
          diameter={this.state.width - 12} />
        <div style={Gauge.style.label}>{this.props.label}</div>
      </div>
    );
  }

  renderReverse() {
    return <h1>Reverse</h1>;
  }

  render() {
    const {reverse} = this.state;
    const {style} = Gauge;

    return (
      <div style={style.container}>
        {!reverse && this.renderObverse()}
        {reverse && this.renderReverse()}
        <span style={style.button} onClick={()=>this.handleClick()}>
          <i className='fa fa-cog'></i>
        </span>
      </div>
    );
  }
}

@@ -84,16 +84,57 @@
 dGauge';
+%0Aimport Sparkline from 'react-sparkline';
 %0A%0Aexport
@@ -1023,16 +1023,40 @@
 nTop: 15
+,%0A      color: '#178BCA'
 %0A    %7D,%0A
@@ -1806,24 +1806,406 @@
 %0A    %7D%0A  %7D%0A%0A
+  setShowTrendline() %7B%0A    this.setState(%7BshowTrendline:!this.state.showTrendline%7D);%0A  %7D%0A%0A  renderSparkline() %7B%0A    const %7Bstyle%7D = Gauge;%0A    const %7Bhistory, showTrendline, width%7D = this.state;%0A%0A    if(showTrendline) %7B%0A      return %3CSparkline strokeColor=%7Bstyle.container.color%7D height=%7B40%7D%0A          width=%7Bwidth - 12%7D data=%7Bhistory%7D /%3E%0A    %7D else %7B%0A      return null;%0A    %7D%0A  %7D%0A%0A
   renderObve
@@ -2345,16 +2345,106 @@
 %7B0.075%7D%0A
+          circleThickness=%7B0.11%7D%0A          textSize=%7B0.8%7D%0A          textColor=%7B'#178BCA'%7D%0A
         
@@ -2477,24 +2477,57 @@
 th - 12%7D /%3E%0A
+        %7Bthis.renderSparkline()%7D%0A
         %3Cdiv
@@ -2631,31 +2631,311 @@
     
-return %3Ch1%3EReverse%3C/h1%3E
+const %7Bstyle%7D = Gauge;%0A    const %7BshowTrendline%7D = this.state;%0A%0A    return (%0A      %3Cdiv%3E%0A        %3Ch1 style=%7Bstyle.label%7D%3ESettings%3C/h1%3E%0A        %3Clabel for='cbx'%3E%3Cinput type='checkbox' name='cbx' checked=%7BshowTrendline%7D onChange=%7B() =%3E this.setShowTrendline()%7D /%3E Show Trendline%3C/label%3E%0A      %3C/div%3E%0A    )
 ;%0A  

Add history trendline