const FileUpload = {
  fileChanged: function(vnode, event) {
    if (!event.target.files[0]) return

    let preview = null
    if (event.target.files[0].type.startsWith('image')) {
      preview = URL.createObjectURL(event.target.files[0])
    }
    if (this.preview) {
      this.preview.clear()
    }

    let out = {
      file: event.target.files[0],
      preview: preview,
      clear: function() {
        URL.revokeObjectURL(preview)
      }
    }

    this.preview = out

    vnode.attrs.onfile(out)
  },

  oninit: function(vnode) {
    this.loading = false
    this.preview = null
  },

  view: function(vnode) {
    let imageLink = this.preview && this.preview.preview || vnode.attrs.media

    return m('fileupload', {
      class: (vnode.attrs.class || '') + ' '
        + (!imageLink ? 'empty' : '') + ' '
        + (vnode.attrs.useimg ? 'useimg' : ''),
    }, [
      imageLink && vnode.attrs.useimg
        ? m('img', { src: imageLink })
        : null,
      imageLink && !vnode.attrs.useimg
        ? m('a', {
            href: imageLink,
            style: {
              'background-image': 'url("' + (imageLink) + '")',
              'height': vnode.attrs.height + 'px'
            },
          })
        : null
      ,
      !imageLink
        ? m('div.noimage', {
            style: {
              'padding-top': vnode.attrs.useimg ? '56.25%' : null,
              'height': !vnode.attrs.useimg ? vnode.attrs.height + 'px' : null,
            },
          }, vnode.children)
        : null,
      m('input', {
        accept: 'image/*',
        type: 'file',
        onchange: this.fileChanged.bind(this, vnode),
      }),
      /*imageLink && vnode.attrs.ondelete
        ? m('button.remove', { onclick: vnode.attrs.ondelete })
        : null,
      this.loading
        ? m('div.loading-spinner')
        : null,*/
    ])
  },
}

module.exports = FileUpload