text: import React, {Component} from 'react';
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import classNames from 'classnames';
  import {autobind} from 'core-decorators';
  import {constructFiles} from '@ciscospark/react-component-utils';
  import {addFiles, removeFile} from '@ciscospark/redux-module-activity';
  import AddFileButton from '@ciscospark/react-component-add-file-button';
  import FileStagingArea from '@ciscospark/react-component-file-staging-area';
  
  import getContainerProps from './selectors';
  
  import styles from './styles.css';
  
  const injectedPropTypes = {
    activity: PropTypes.object.isRequired,
    conversation: PropTypes.object.isRequired,
    spark: PropTypes.object.isRequired,
    addFiles: PropTypes.func.isRequired,
    removeFile: PropTypes.func.isRequired
  };
  
  const propTypes = {
    onSubmit: PropTypes.func.isRequired,
    ...injectedPropTypes
  };
  
  export class FileUploader extends Component {
    shouldComponentUpdate(nextProps) {
      const {props} = this;
      return nextProps.activity !== props.activity;
    }
  
    @autobind
    handleFileChange(e) {
      e.stopPropagation();
      e.preventDefault();
  
      if (e.target.files.length) {
        const {props} = this;
        const {
          activity,
          conversation,
          spark
        } = props;
  
        const files = constructFiles(e.target.files);
        props.addFiles(conversation, activity, files, spark);
  
        // Clear the value of the input so the same file can be added again.
        e.target.value = '';
      }
    }
  
    @autobind
    handleFileRemove(id) {
      const {props} = this;
      props.removeFile(id, props.activity);
    }
  
    render() {
      const {
        onSubmit,
        activity
      } = this.props;
      const files = activity.get('files');
  
      let stagingArea;
      if (files && files.count()) {
        stagingArea = (
          <FileStagingArea
            files={files}
            onFileRemove={this.handleFileRemove}
            onSubmit={onSubmit}
          />
        );
      }
  
      return (
        <div className={classNames('ciscospark-file-uploader-container', styles.container)}>
          {stagingArea}
          <div className={classNames('ciscospark-button-container', styles.buttonContainer)}>
            <AddFileButton onChange={this.handleFileChange} />
          </div>
        </div>
      );
    }
  }
  
  FileUploader.propTypes = propTypes;
  
  export default connect(
    getContainerProps,
    (dispatch) => bindActionCreators({
      addFiles,
      removeFile
    }, dispatch)
  )(FileUploader);
  