import React, { PropTypes } from 'react'
import { injectIntl, intlShape } from 'react-intl'

class SearchFilterItem extends React.Component {
  constructor (props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    const { filter: { id } } = this.props
    this.props.toggleFilter(id)
  }

  render () {
    const { filter } = this.props
    // TODO: Put back count when number is fixed
    return (
      <li onClick={this.handleClick}
          data-automation-id={`filter_${filter.id}`}>
        <input type='checkbox' id='filter' name='filter' readOnly checked={filter.active} />
        <label htmlFor='filter'><span></span><h2 className='filter_label'
                                             data-automation-id='filter_label'>{this.props.intl.formatMessage({ id: filter.bucket })}</h2>
        </label>

      </li>
    )
  }
}

SearchFilterItem.propTypes = {
  filter: PropTypes.object.isRequired,
  toggleFilter: PropTypes.func.isRequired,
  intl: intlShape.isRequired
}

export default injectIntl(SearchFilterItem)

@@ -247,19 +247,51 @@
 eClick (
-) %7B
+event) %7B%0A    event.preventDefault()
 %0A    con
@@ -406,24 +406,61 @@
  this.props%0A
+    const id = %60filter_$%7Bfilter.id%7D%60%0A
     // TODO:
@@ -576,37 +576,18 @@
 ion-id=%7B
-%60filter_$%7Bfilter.id%7D%60
+id
 %7D%3E%0A     
@@ -615,24 +615,20 @@
 box' id=
-'filter'
+%7Bid%7D
  name='f
@@ -697,103 +697,100 @@
 For=
-'filter'%3E%3Cspan%3E%3C/span%3E%3Ch2 className='filter_label'%0A                                            
+%7Bid%7D%3E%3Cspan%3E%7B/* Helper for checkbox styling */%7D%3C/span%3E%0A          %3Ch2 className='filter_label'
  dat
@@ -820,16 +820,29 @@
 _label'%3E
+%0A            
 %7Bthis.pr
@@ -887,16 +887,27 @@
 cket %7D)%7D
+%0A          
 %3C/h2%3E%0A  

Fix SearchFilterItem by adding preventDefault to click event