var classNames = require('classnames');
var React = require('react');

import StringUtil from '../utils/StringUtil';

var FilterHeadline = React.createClass({

  displayName: 'FilterHeadline',

  propTypes: {
    onReset: React.PropTypes.func.isRequired,
    name: React.PropTypes.string.isRequired,
    currentLength: React.PropTypes.number.isRequired,
    totalLength: React.PropTypes.number.isRequired,
    inverseStyle: React.PropTypes.bool
  },

  getDefaultProps: function () {
    return {
      inverseStyle: false
    };
  },

  handleReset: function (e) {
    e.preventDefault();
    this.props.onReset();
  },

  render: function () {
    var filteredLength = this.props.currentLength;
    var totalLength = this.props.totalLength;
    let inverseStyle = this.props.inverseStyle;
    let name = StringUtil.pluralize(this.props.name, totalLength);

    var filteredClassSet = classNames({
      'h4': true,
      'inverse': inverseStyle,
      'hidden': filteredLength === totalLength
    });

    var unfilteredClassSet = classNames({
      'h4': true,
      'inverse': inverseStyle,
      'hidden': filteredLength !== totalLength
    });

    var anchorClassSet = classNames({
      'h4 clickable': true,
      'inverse': inverseStyle,
      'hidden': filteredLength === totalLength
    });

    let listClassSet = classNames({
      'list-unstyled list-inline': true,
      'inverse': inverseStyle
    });

    return (
      <ul className={listClassSet}>
        <li className={filteredClassSet}>
          Showing {filteredLength} of {totalLength} {name}
        </li>
        <li className={anchorClassSet} onClick={this.handleReset}>
          <a className="small">
            (Show all)
          </a>
        </li>
        <li className={unfilteredClassSet}>
          {totalLength} {name}
        </li>
      </ul>
    );
  }
});

module.exports = FilterHeadline;

@@ -1,11 +1,54 @@
-var
+import React, %7BPropTypes%7D from 'react';%0Aimport
  classNa
@@ -51,26 +51,21 @@
 ssNames 
-= require(
+from 
 'classna
@@ -72,39 +72,8 @@
 mes'
-);%0Avar React = require('react')
 ;%0A%0Ai
@@ -122,424 +122,232 @@
 ';%0A%0A
-var FilterHeadline = React.createClass(%7B%0A%0A  displayName: 'FilterHeadline',%0A%0A  propTypes: %7B%0A    onReset: React.PropTypes.func.isRequired,%0A    name: React.PropTypes.string.isRequired,%0A    currentLength: React.PropTypes.number.isRequired,%0A    totalLength: React.PropTypes.number.isRequired,%0A    inverseStyle: React.PropTypes.bool%0A  %7D,%0A%0A  getDefaultProps: function () %7B%0A    return %7B%0A      inverseStyle: false
+const METHODS_TO_BIND = %5B%0A  'handleReset'%0A%5D;%0A%0Aclass FilterHeadline extends React.Component %7B%0A  constructor() %7B%0A    super();%0A%0A    METHODS_TO_BIND.forEach((method) =%3E %7B%0A      this%5Bmethod%5D = this%5Bmethod%5D.bind(this);
 %0A    %7D
+)
 ;%0A  %7D
-,
 %0A%0A  
@@ -357,27 +357,16 @@
 dleReset
-: function 
 (e) %7B%0A  
@@ -416,17 +416,16 @@
 t();%0A  %7D
-,
 %0A%0A  rend
@@ -430,177 +430,88 @@
 nder
-: function () %7B%0A    var filteredLength = this.props.currentLength;%0A    var totalLength = this.props.totalLength;%0A    let inverseStyle = this.props.inverseStyle
+() %7B%0A    let %7BcurrentLength, inverseStyle, name, totalLength%7D = this.props
 ;%0A    
-let 
 name
@@ -534,27 +534,16 @@
 uralize(
-this.props.
 name, to
@@ -559,19 +559,19 @@
 );%0A%0A    
-var
+let
  filtere
@@ -704,19 +704,19 @@
 );%0A%0A    
-var
+let
  unfilte
@@ -855,11 +855,11 @@
     
-var
+let
  anc
@@ -1226,24 +1226,23 @@
 howing %7B
-filtered
+current
 Length%7D 
@@ -1543,17 +1543,302 @@
 );%0A  %7D%0A%7D
-)
+%0A%0AFilterHeadline.defaultProps = %7B%0A  inverseStyle: false%0A%7D;%0A%0AFilterHeadline.propTypes = %7B%0A  currentLength: PropTypes.number.isRequired,%0A  inverseStyle: PropTypes.bool,%0A  name: PropTypes.string.isRequired,%0A  onReset: PropTypes.func.isRequired,%0A  totalLength: PropTypes.number.isRequired%0A%7D
 ;%0A%0Amodul

Bring FilterHeadline component to es6