import React, {Component} from 'react'
import Dropzone from 'react-dropzone'
import ReactSpinner from 'react-spinjs'

class FileDropzone extends Component {
  render() {
    if (this.props.analysing) {
      return (
        <div style={{display: "flex", height: 200, alignItems: 'center', justifyContent: 'center'}}>
          <ReactSpinner />
        </div>
      )
    } else {
      return (
        <Dropzone onDrop={this.props.on_files_drop} style={{display: "flex", padding: 10, height: 130, backgroundColor: "#EEE", boxShadow: "inset 0 0 5px #BBB"}} activeStyle={{backgroundColor: "#DDD"}}>
          <div style={{flex: 1, borderWidth: 3, borderStyle: "dashed", borderColor: "#BBB", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", padding: 20}}>
            <div style={{color: "#BBB", fontSize: 20, fontWeight: 900}}>
              {this.props.children}
            </div>
            <div className={"link"} style={{margin: 10, borderWidth: 1, borderStyle: "solid", borderColor: "#BBB", color: "#BBB", padding: "3px 10px 3px 10px", borderRadius: 3}}>
              Parcourir ...
            </div>
          </div>
        </Dropzone>
      )
    }
  }
}

export default FileDropzone