var D = React.DOM;

var FileInput = React.createClass({
  getInitialState: function(){
    return {
      active: false,
      target: false,
      hover: false
    };
  },
  componentDidMount: function(){
    var self = this;

    window.addEventListener('dragover', self.dropTarget);
    window.addEventListener('dragleave', self.dropLeave);
    window.addEventListener('drop', self.handleDrop);
  },
  componentWillUnmount: function(){
    var self = this;

    window.removeEventListener('dragover', self.dropTarget);
    window.removeEventListener('dragleave', self.dropLeave);
    window.removeEventListener('drop', self.handleDrop);
  },
  handleChange: function(e){
    var file = e.target.files[0];
    this.props.onFileChange({
      file: file,
      name: file.name,
      type: file.type
    });
  },
  dropTarget: function(e){
    var self = this;

    if (!self.state.active) {
      self.setState({
        target: true
      });
    }
  },
  dropLeave: function(e) {
    var self = this;

    if(e.screenX === 0 && e.screenY === 0) { // Checks for if the leave event is when leaving the window
    	self.setState({
    	  target: false
    	});
    }
  },
  handleDrop: function(e){
    e.preventDefault();
    e.stopPropagation();

    var self = this;
    var uploadObj = {
      target: e.nativeEvent.dataTransfer
    };

    self.setState({
      target: false,
      hover: false
    });

    self.handleChange(uploadObj);
  },
  handleDragEnter: function(e) {
    e.preventDefault();
    e.stopPropagation();
    var self = this;

    if (!self.state.active) {
      self.setState({
        hover: true
      });
    }
  },
  handleDragLeave: function(e) {
    var self = this;

		self.setState({
      hover: false
    });
  },
  handleDragOver: function(e){
    e.preventDefault();
  },
  getClassNames: function(){
    var classes = [];
    if(this.state.target) {
      classes.push('target');
    }
    if(this.state.hover) {
      classes.push('hover')
    }
    return classes.join(' ');
  },
  render: function(){
    var self = this;
    var classNames = self.getClassNames();

    return D.div({
      className: 'file-container'
    }, [
      D.input({
        className: "file-input " + classNames,
        name: "upload",
        type: "file",
        ref: "upload",
        onChange: self.handleChange,
        onDrop: self.handleDrop,
        onDragEnter: self.handleDragEnter,
        onDragOver: self.handleDragOver,
        onDragLeave: self.handleDragLeave
      })
    ]);
  }
});

var FilePreview = React.createClass({
  getChild: function(){
    var self = this;
    var child = [];

    if( self.props.type.indexOf("image") > -1 ) {
      child.push(
      	D.img({
          className: "preview-img",
          src: self.props.file
        })
      );
    } else {
      child.push(
      	D.p({
          className: "preview-name"
        }, self.props.name)
      );
    }

    child.push(
    	D.button({
        className: "remove-file",
        onClick: self.props.handleFileRemove
      }, "Remove File")
    );

    return child;
  },
  render: function(){
    var child = this.getChild();
    return D.div({
      className: "file-preview"
    }, child);
  }
});

var App = React.createClass({
  getInitialState: function(){
    return {
      previewing: false,
      reset: false
    };
  },
  handleFile: function(fileObj){
    var self = this;
    var reader = new FileReader();

    self.fileName = fileObj.name;
    self.fileType = fileObj.type;

    reader.onload = function(e) {
      self.file = reader.result;
      self.setState({
        previewing: true
      });
    }
    reader.readAsDataURL(fileObj.file);

    self.setState({
      reset: true
    });
  },
  resetFile: function(){
    var self = this;

    self.setState({
      previewing: false,
      reset: true
    });

    setTimeout(function(){
      self.setState({
        reset: false
      });
    }, 100);
  },
  getChildren: function(){
    var self = this;
    var childrenArr = [];

    if(!self.state.reset){
      childrenArr.push(
      	React.createElement(FileInput, {
          onFileChange: self.handleFile
        })
      );
    }

    if(self.state.previewing){
      childrenArr.push(
      	React.createElement(FilePreview, {
          file: self.file,
          name: self.fileName,
          type: self.fileType,
          handleFileRemove: self.resetFile
        })
      );
    }

    return childrenArr;
  },
  render: function(){
    var children = this.getChildren();
    return D.div({
      className: "app"
    }, children);
  }
});

React.render(React.createElement(App, null), document.body);