import React from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';

export default class DragDrop extends React.Component {
  dropRef = React.createRef()

  state = {
    event: '',
    styleInEvent: { border: '1px solid red' },
  }

  comaponentDidMount() {
    let div = this.dropRef.current;
    div.addEventListener('dragenter', this.handleDragIn);
    div.addEventListener('dragleave', this.handleDragOut);
    div.addEventListener('dragover', this.handleDrag);
    div.addEventListener('drop', this.handleDrop);

    this.setState({ styleInEvent: { border: '1px solid blue' } });
  }

  componAentWillUnmount() {
    let div = this.dropRef.current;
    div.removeEventListener('dragenter', this.handleDragIn);
    div.removeEventListener('dragleave', this.handleDragOut);
    div.removeEventListener('dragover', this.handleDrag);
    div.removeEventListener('drop', this.handleDrop);

    this.setState({ styleInEvent: { border: '1px solid green' } });
  }

  handleDrag = e => {
    e.preventDefault();
    e.stopPropagation();
    this.setState({ event: 'handleDrag' });
    console.log('handleDrag');

    this.setState({ styleInEvent: { border: '1px solid yellow' } });
  }

  handleDragIn = e => {
    e.preventDefault();
    e.stopPropagation();

    this.setState({ event: 'handleDragIn' });
    console.log('handleDragIn');

    this.setState({ styleInEvent: { border: '1px solid black' } });
  }

  handleDragOut = e => {
    e.preventDefault();
    e.stopPropagation();

    this.setState({ event: 'handleDragOut' });
    console.log('handleDragOut');

    this.setState({ styleInEvent: { border: '1px solid red' } });
  }

  handleDrop = e => {
    e.preventDefault();
    e.stopPropagation();
    console.log('handleDrop', e);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      console.log(e.dataTransfer.files);
      e.dataTransfer.clearData();
      this.dragCounter = 0;
    }
    this.setState({
      event: 'handleDrop',
      styleInEvent: { border: '1px solid #fff', color: 'blue' },
    });
  }

  render() {
    const { event, styleInEvent } = this.state;
    const { children } = this.props;
    return (
    <div style={{ width: '900px', ...styleInEvent }}>
      <p>Media {event}</p>
      {children};

      <Dropzone
            onDropAccepted={e => console.log(e)}
            multiple
            onDrop={this.onDrop}
          >
            {({ getRootProps, getInputProps, isDragActive }) => (
              <p></p>
            )}
          </Dropzone>
    </div>
    );
  }
}

DragDrop.propTypes = {
  handleDrag: PropTypes.func,
  handleDragIn: PropTypes.func,
  handleDragOut: PropTypes.func,
  handleDrop: PropTypes.func,
};