import React from 'react';
import PropTypes from 'prop-types';
import Octicon from '../atom/octicon';
import {addEvent} from '../reporter-proxy';

export default class ChangedFilesCountView extends React.Component {
  static propTypes = {
    changedFilesCount: PropTypes.number.isRequired,
    didClick: PropTypes.func.isRequired,
    mergeConflictsPresent: PropTypes.bool,
  }

  static defaultProps = {
    changedFilesCount: 0,
    mergeConflictsPresent: false,
    didClick: () => {},
  }

  handleClick() {
    addEvent('click', {package: 'github', component: 'ChangedFileCountView'});
    this.props.didClick();
  }

  render() {
    const label =
      (this.props.changedFilesCount === 1)
        ? '1 file'
        : `${this.props.changedFilesCount} files`;
    return (
      <button
        ref="changedFiles"
        className="github-ChangedFilesCount inline-block"
        onClick={this.handleClick.bind(this)}>
        <Octicon icon="diff" />
        {label}
        {this.props.mergeConflictsPresent && <Octicon icon="alert" />}
      </button>
    );
  }
}

@@ -138,16 +138,53 @@
 -proxy';
+%0Aimport %7Bautobind%7D from '../helpers';
 %0A%0Aexport
@@ -525,16 +525,97 @@
 %7D,%0A  %7D%0A%0A
+  constructor(props) %7B%0A    super(props);%0A    autobind(this, 'handleClick');%0A  %7D%0A%0A
   handle
@@ -991,16 +991,16 @@
 -block%22%0A
+
         
@@ -1028,19 +1028,8 @@
 lick
-.bind(this)
 %7D%3E%0A 

use autobind