import React, { PureComponent } from 'react'
import { Upload, Spin } from 'antd';
import { uploaderProps } from '@/utils/upload'

export default class extends PureComponent {
  state = {
    loading: false,
  }
  
  handleChange = ({ file, fileList }) => {
    const { status, response } = file
    this.setState({ fileList, loading: status === "uploading" })

    if (typeof this.props.onChange === 'function' && status != "uploading") {
      const image = status === 'done' ? response : undefined
      this.props.onChange(image);
    }
  };

  render() {
    return (
      <Upload
        {...uploaderProps}
        onChange={this.handleChange}
      >
        <Spin spinning={this.state.loading}>
          {this.props.children}
        </Spin>
      </Upload>
    )
  }
}
