import React, { Component, PropTypes } from 'react'
import CSSModules from 'react-css-modules'
import Icon from 'fe-icon'
import * as icons from './icons'
import styles from './index.styl'

import Dropzone from 'react-dropzone'
import Spinner from 'fe-spinner'

const basicStyle = {
  width: '100px',
  height: '100px',
  border: '2px dashed rgba(0, 0, 0, .2)',
  borderRadius: '3px'
}

@CSSModules(styles)

export default class extends Component {
  static propTypes = {
    url: PropTypes.string,
    onSuccess: PropTypes.func,
    onError: PropTypes.func,
    // file: PropTypes.object,
    preview: PropTypes.string,
    type: PropTypes.oneOf(['image', 'video'])
  }
  static defaultProps = {
    url: 'http://172.30.11.75:41001/attachment',
    disableClick: false,
    multiple: false,
    accept: 'image/*',
    type: 'image'
  }
  componentWillReceiveProps (nextprops) {
    if (nextprops.preview !== this.props.preview) {
      this.setState({preview: nextprops.preview, status: nextprops.preview ? 2 : this.state.status})
    }
  }
  handleDrop = files => {
    if (!files || !files[0]) return
    this.setState(Object.assign({}, this.state, {
      files: files,
      preview: undefined
    }), () => this.upload(files[0]))
  }
  upload = (file) => {
    this.setState(Object.assign({}, this.state, {
      status: 1
    }))
    let formData = new window.FormData()
    formData.append('file', file)
    fetch(this.props.url, {
      method: 'POST',
      credentials: 'include',
      mode: 'cors',
      body: formData
    })
      .then(res => res.json())
      .then(res => {
        this.setState(Object.assign({}, this.state, {
          status: 2
        }))
        this.props.onSuccess && this.props.onSuccess(res)
      })
      .catch(err => this.props.onError && this.props.onError(err))
  }
  handleClear = e => {
    e.stopPropagation()
    this.props.onClear()
    this.setState({files: [], status: 0})
  }
  state = {
    files: this.props.file ? [this.props.file] : [],
    // 1 => uploading
    // 2 => uploaded
    status: this.props.preview ? 2 : 0,
    preview: this.props.preview
  }
  render () {
    const state = this.state
    const props = this.props

    let picUrl = this.state.preview || (state.files[0] ? state.files[0].preview : undefined)
    return <div styleName='wrap'>
      <Dropzone styleName='dropzone' disableClick={props.disableClick} multiple={props.multiple} accept={props.accept} style={basicStyle} onDrop={this.handleDrop}>
        {
          picUrl
          ? <div styleName='preview'>
            {
              state.status
              ? <div styleName='mask'>
                {
                  state.status === 1 ? <Spinner /> : <Icon style={{color: '#41BC6A'}} size={30} icon={icons.check} />
                }
              </div>
              : null
            }
            <span styleName='clear' onClick={this.handleClear}>&times;</span>
            {
              this.props.type !== 'video'
              ? <img src={picUrl} />
              : <video><source src={state.files[0].preview} /></video>
            }
            {
              this.props.type === 'video' ? <span styleName='videoTitle'>{state.files[0].name}</span> : null
            }
          </div>
          : <Icon size={40} icon={icons.add} />
        }
      </Dropzone>
    </div>
  }
}