const {pull, collect} = require('pull-stream')
const fileReader = require('pull-file-reader')
const drop = require('drag-and-drop-files')
const h = require('hyperscript')
var jimp = require('jimp')

const main = h('div', 'drop an image on the screen')
const a = h('a', {style: "display: none"})

document.body.appendChild(main)
document.body.appendChild(a)

drop(document, function (files) {
  var first = files[0]
  const notice = h('div', 'processing image')

  document.body.appendChild(notice)

  pull(
    fileReader(first),
    collect(function (err, buffs) {
      var contents = Buffer.concat(buffs)

      jimp.read(contents, function (err, image) {
        delete image._exif

        image.quality(30)
          .scale(.25)
          .dither16()
          .greyscale()
          .getBuffer(jimp.MIME_JPEG, function (err, buf) {

          const blob = new Blob([buf], {type: 'octet/stream'})
          const url = window.URL.createObjectURL(blob)
          a.href = url
          a.download = 'dithered-img.jpg'
          a.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(notice)
        })
      })
    })
  )
})