/**
 * UploadField component
 *
 * Generated by coz on 2016-10-20,
 * from a template provided by apeman-asset-templates.
 *
 * @function UploadField
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import {
  ApField,
  ApFieldLabel, ApFieldValue,
  ApUpload
} from 'apeman-react-basic'

const debug = defineDebug('project:fragment:upload-field')

const noop = () => undefined

/** @lends UploadField */
const UploadField = ({
  id,
  name,
  label,
  value,
  onUpdate = noop,
  onUpdateRaw = noop,
  onError = (err) => console.error(err),
  multiple = false
}) => (
  <ApField className='upload-field'>
    <ApFieldLabel htmlFor={ id }>
      { label }
    </ApFieldLabel>
    <ApFieldValue>
      <ApUpload id={ id }
                value={ value }
                name={ name }
                onLoad={ ({ urls, target }) => {
                  let url = urls && urls[ 0 ]
                  let [ file ] = target && target.files || []
                  onUpdate({ [name]: url })
                  onUpdateRaw({ [name]: { url, file } })
                } }
                onError={ onError }
                multiple={ multiple }
      />
    </ApFieldValue>
  </ApField>
)

export default UploadField