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)
  },

  fileRemoved: function(vnode) {
    if (this.preview) {
      this.preview.clear()
      this.preview = null
      vnode.attrs.onfile(null)
    }
    if (vnode.attrs.media) {
      vnode.attrs.ondelete(vnode.attrs.media)
    }
  },

  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,
              },
            }),
            m('div.text', vnode.children)
          ]
        : null,
      m('input', {
        accept: 'image/*',
        type: 'file',
        onchange: this.fileChanged.bind(this, vnode),
      }),
      imageLink && vnode.attrs.ondelete
        ? m('button.remove', { onclick: this.fileRemoved.bind(this, vnode), title: 'Remove image' }, m.trust('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M144 400C144 408.8 136.8 416 128 416C119.2 416 112 408.8 112 400V176C112 167.2 119.2 160 128 160C136.8 160 144 167.2 144 176V400zM240 400C240 408.8 232.8 416 224 416C215.2 416 208 408.8 208 400V176C208 167.2 215.2 160 224 160C232.8 160 240 167.2 240 176V400zM336 400C336 408.8 328.8 416 320 416C311.2 416 304 408.8 304 400V176C304 167.2 311.2 160 320 160C328.8 160 336 167.2 336 176V400zM310.1 22.56L336.9 64H432C440.8 64 448 71.16 448 80C448 88.84 440.8 96 432 96H416V432C416 476.2 380.2 512 336 512H112C67.82 512 32 476.2 32 432V96H16C7.164 96 0 88.84 0 80C0 71.16 7.164 64 16 64H111.1L137 22.56C145.8 8.526 161.2 0 177.7 0H270.3C286.8 0 302.2 8.526 310.1 22.56V22.56zM148.9 64H299.1L283.8 39.52C280.9 34.84 275.8 32 270.3 32H177.7C172.2 32 167.1 34.84 164.2 39.52L148.9 64zM64 432C64 458.5 85.49 480 112 480H336C362.5 480 384 458.5 384 432V96H64V432z"/></svg>'))
        : null,
      /*this.loading
        ? m('div.loading-spinner')
        : null,*/
    ])
  },
}

module.exports = FileUpload