'use strict'

var React = require('react')
global.jQuery = require('jquery')
var ReactBootstrap = require('react-bootstrap')
var ListGroupItem = ReactBootstrap.ListGroupItem
var Button = ReactBootstrap.Button
var Glyphicon = ReactBootstrap.Glyphicon
var OverlayTrigger = ReactBootstrap.OverlayTrigger
var Popover = ReactBootstrap.Popover

var Rating = React.createClass({
  propTypes: {
    eventKey: React.PropTypes.number,
    measurement: React.PropTypes.object,
    assessId: React.PropTypes.string.isRequired,
    attribute: React.PropTypes.object,
    saveMeasurement: React.PropTypes.func.isRequired,
    rating: React.PropTypes.object
  },

  ratingClick: function () {
    this.props.saveMeasurement('rating', this.props.rating.id)
  },
  targetClick: function () {
    this.props.saveMeasurement('target', this.props.rating.id)
  },
  render: function () {
    var ratingActive = (this.props.measurement && this.props.measurement.rating) ? (this.props.measurement.rating === this.props.rating.id) : false
    var targetActive = (this.props.measurement && this.props.measurement.target_rating) ? (this.props.measurement.target_rating === this.props.rating.id) : false
    var targetBsStyle = targetActive ? 'success' : 'default'
    var descClass = (this.props.rating.desc_class ? ' ' + this.props.rating.desc_class : '') + (this.props.rating.colour ? ' rating-colour' : '')

    var header = (
      <div>
        <h4 className='inline clickable' onClick={this.ratingClick}>{this.props.rating.name}</h4>
        {(this.props.measurement && this.props.measurement.rating)
          ? <span>
            <Button onClick={this.targetClick} bsStyle={targetBsStyle} className='target-btn' active={targetActive} bsSize='xsmall'>
              Target
            </Button>
            <OverlayTrigger trigger='click' placement='left' rootClose
              overlay={<Popover id={'rating-popover-' + this.props.rating.id}>You have decided your current rating. Set your future goal by selecting a target button.</Popover>}>
              <Glyphicon className='target-help clickable' glyph='question-sign' />
            </OverlayTrigger>
          </span>
          : undefined}
      </div>
    )

    return (
      <ListGroupItem active={ratingActive} key={this.props.rating.id} header={header} className={descClass} style={{'borderLeftColor': this.props.rating.colour}}>
        <div className='rating-desc clickable' onClick={this.ratingClick}>
          {this.props.rating.desc}
        </div>
      </ListGroupItem>
      )
  }
})

module.exports = Rating

@@ -659,36 +659,60 @@
 lick: function (
+e
 ) %7B%0A
+    e.preventDefault()%0A
     this.props.s
@@ -784,28 +784,52 @@
 : function (
+e
 ) %7B%0A
+    e.preventDefault()%0A
     this.pro
@@ -1333,46 +1333,10 @@
 ass 
-? ' ' + this.props.rating.desc_class :
+%7C%7C
  '')
@@ -1585,16 +1585,19 @@
 .rating)
+ &&
 %0A       
@@ -1598,18 +1598,16 @@
         
- ?
  %3Cspan%3E%0A
@@ -2167,30 +2167,8 @@
 pan%3E
-%0A          : undefined
 %7D%0A  
@@ -2370,19 +2370,20 @@
        %3C
-div
+span
  classNa
@@ -2435,16 +2435,45 @@
 ngClick%7D
+ style=%7B%7B'display': 'block'%7D%7D
 %3E%0A      
@@ -2507,27 +2507,28 @@
 %7D%0A        %3C/
-div
+span
 %3E%0A      %3C/Li

kill another warning