// Import
import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';
import Dialog from 'material-ui/Dialog'
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import LinearProgress from 'material-ui/LinearProgress';
import ActionBackup from 'material-ui/svg-icons/action/backup';
import * as Styles from '../constants/Styles';

class Uploader extends Component {
  _clearUploader(e){
    if(e) e.preventDefault();
    this.props.dispatch(actions.toggleUploader(null));
  }
  _upload(){
    this.props.dispatch(actions.upload('PDF', documents.bucket, this.file));
  }
  _openSelectorFile(e){
    if(e) e.preventDefault();
    this.inputFile.click();
  }
  _selectFile(e){
    e.preventDefault();
    this.file = this.inputFile.files[0];
    this._upload();
  }
  _dropFile(e){
    e.preventDefault();
    e.stopPropagation();
    this.file = e.dataTransfer.files[0];
    this._upload();
  }
  _handleDragOver(e){
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }
  render() {
    const {documents} = this.props;
    const uploadActions = [
      <FlatButton label="Cancelar" primary={true} className="buttonsecondary" onTouchTap={this._clearUploader.bind(this)} />
    ]
  	return (
      <Dialog title="Subir Documento"
        actions={uploadActions}
        modal={true}
        open={documents.document_type !== null}>
        <div className="row middle-xs center-xs">
          <div className="col-xs-12">
            <div ref={(dropzone) => {this.dropzone = dropzone}}
            onTouchTap={this._openSelectorFile.bind(this)}
            onDrop={this._dropFile.bind(this)}
            onDragOver={this._handleDragOver.bind(this)}
            style={Styles.Dropzone}>
              <input hidden
                type="file"
                ref={(input) => {this.inputFile = input}}
                accept="application/pdf"
                onChange={this._selectFile.bind(this)}/>
              <label>Arrastra tu archivo aquí o seleccionalo desde tu computadora.</label>
              <br />
              <IconButton
                tooltip="Selecciona tu archivo dando clic aquí"
                iconStyle={Styles.Dropzone.IconButton}>
                <ActionBackup color={Styles.Dropzone.ActionBackup.color} />
              </IconButton>
              <LinearProgress mode="determinate" value={documents.current_progress} />
            </div>
          </div>
        </div>
      </Dialog>
    );
  }
}
// Export
function mapStateToProps(state, ownProps){
  return { documents: state.Documents }
}

export default connect(mapStateToProps)(Uploader)