content: import React, { Component } from 'react';
  import Dropzone from 'react-dropzone';
  import { connect } from 'react-redux';
  import { saveFileQuestion, deleteFileQuestion } from '../../../actions/questionActions';
  import { getFile } from '../../../actions/userFileActions';
  import Validation from '../../../utils/validation/Validation';
  import InputValidation from '../../../utils/validation/InputValidation';
  import { TooltipTrigger } from 'pui-react-tooltip'
  import Popup from 'react-popup';
  
  @connect(store => ({}))
  class Upload extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        files: [],
        hasError: false,
      };
  
      this.setErrorState = this.setErrorState.bind(this);
    }
  
    setErrorState(errorObject) {
      this.setState(errorObject);
    }
  
    getFile(fileName) {
      this.setState({ fileName }, function () {
        this.props.dispatch(getFile(fileName));
      });
    }
  
    deleteFile(fileName) {
      this.props.dispatch(deleteFileQuestion(this.props.year, this.props.question, fileName, this.props.questionPlusId));
      Popup.close();
    }
  
    onDrop(acceptedFiles) {
      let filesToSave = acceptedFiles;
      if (this.state.files.length > 0) {
        const newArray = this.state.files.slice();
        acceptedFiles.map(doc => newArray.push(doc));
        filesToSave = newArray;
      }
      this.setState(
        {
          files: filesToSave,
        },
        function () {
          let files = this.state.files.slice();
          this.props.dispatch(
            saveFileQuestion(this.props.year,
              this.props.question,
              files,
              this.props.questionPlusId,
              this.state.hasError,
            ),
          );
          this.setState({ files: [] });
        },
      );
    }
    DeleteFilePopup(filename) {
      Popup.create({
          title: null,
          content: <div className="mainPopupContent">
              <p>Are you sure you want to delete {filename}</p>
              <div className="btn-container">
                  <div onClick={this.deleteFile.bind(this,filename)} className="btn-yes">
                      Yes
                  </div>
                  <div onClick={Popup.close.bind(this)} className="btn-no">
                      No
                  </div>
              </div>
          </div>,
          className: 'prompt-class',
          wildClasses: 'true',
      });
  }
    render() {
      return (
        <div className="questionContainer">
          <div className="questionRow">
            <span className="topSpan">
              {this.props.question.text}
              {this.props.question.tip_text ?
                <TooltipTrigger tooltip={this.props.question.tip_text}>
                  <i className="fa fa-info-circle" aria-hidden="true" />
                </TooltipTrigger>
                : ''}
            </span>
            <div className="uploadContainer">
              <Dropzone
                disabled={this.props.isDisabled}
                className={this.props.year ? "dropzone " + (this.props.question.hasError ? 'error' : '' + (this.props.isDisabled && 'disabled')) : "dropzone " + (this.state.hasError ? 'error' : '')}
                acceptClassName="accepting-drop"
                rejectClassName="rejecting-drop"
                onDrop={this.onDrop.bind(this)}
              >
                <p>
                  {' '}Drop files or click here
                  <i className="fa fa-upload" />
                </p>
              </Dropzone>
              <div className="uploadedFiles">
                {this.props.question.file_names.map((fileName, index) => (
                  <div
                    key={index}
                    className="uploadedFile"
                  >
                    <i onClick={this.getFile.bind(this, fileName)} className="fa fa-download" />
                    {this.props.isDisabled ? "": <i onClick={this.DeleteFilePopup.bind(this,fileName)}className="fa fa-times" />}
                    {fileName}
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className={this.props.year ? (this.props.question.hasError ? 'questionRow errorMessage' : 'hide') : (this.state.hasError ? 'questionRow errorMessage' : 'hide')}>        
            {this.props.year ? (<Validation
              validationType={this.props.question.validation_type}
              answer={this.props.question.file_names}
              question={this.props.question}
              questionPlusId={this.props.questionPlusId}
            />) : (<InputValidation
              input={this.props.question.file_names}
              validationType={this.props.question.validation_type}
              setErrorState={this.setErrorState} />)}
          </div>
          <div className={this.props.question.feedback ? 'questionRow warmingMessage' : 'hide'}>
            {this.props.question.feedback}
          </div>
        </div>
      );
    }
  }
  
  export default Upload;
  