import React, { Component } from 'react'

import { renderThumbnail } from './upload.helpers'

export default class UploadImageComponent extends Component {
  constructor(props) {
    super(props)
    document.body.addEventListener("dragover", this.dragOver.bind(this))
    document.body.addEventListener("dragleave", this.dragLeave.bind(this))
    document.body.addEventListener("drop", this.upload.bind(this))
  }
  
  dragOver(e) {
    e.stopPropagation()
    e.preventDefault()
    document.body.className = 'dragging'
  }

  dragLeave(e) {
    e.stopPropagation()
    e.preventDefault()
    document.body.className = ''
  }

  upload(e) {
    e.preventDefault()
    document.body.className = ''
    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
    let i
    let file
    for (i = 0; i < files.length; i++) {
      file = files[i]
      if (file && file.type.match('image.*')) break
    }
    if (!file) {
      console.log('No file specified')
      return
    }
    const fr = new FileReader()
    fr.onload = fileReaderEvent => {
      fr.onload = null
      const img = new Image()
      img.onload = () => {
        img.onload = null
        this.resizeAndUpload(file, img)
      }
      img.src = fileReaderEvent.target.result
    }
    fr.readAsDataURL(file)
  }

  resizeAndUpload(file, img) {
    const canvas = renderThumbnail(img, this.props)
    canvas.toBlob(blob => {
      this.props.onUpload({ file, img, canvas, blob, freshen: true })
    }, 'image/jpeg', this.props.quality || 80)
  }

  render() {
    return (
      <div className='uploadButton'>
        <input
          type="file"
          accept="image/*"
          onChange={this.upload.bind(this)}
          required
        />
        <div className='dragCurtain'>
          <div className='dragLabel'>Drop image here</div>
        </div>
      </div>
    )
  }
}