import React from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import { autobind } from 'core-decorators';
import Tools from "../src/utils/tools";
import Upload from '../src/components/Upload';

/** 
 * props 
 */
const propTypes = {
  value: PropTypes.array,
  defaultValue: PropTypes.array,
  sign: PropTypes.string,
  action: PropTypes.string,
  accept: PropTypes.string,
  name: PropTypes.string,
  headers: PropTypes.object,
  withCredentials: PropTypes.bool,
  disabled: PropTypes.bool,
  limit: PropTypes.number,
  maxSize: PropTypes.number,
  hasThumbnail: PropTypes.bool,
  hasDelete: PropTypes.bool,
  dropZoneProps: PropTypes.object,
  cropGetBase64Type: PropTypes.string,
  cropDisabled: PropTypes.bool,
  cropMinWidth: PropTypes.number,
  cropMinHeight: PropTypes.number,
  cropList: PropTypes.array,
  cropProps: PropTypes.object,
  sortDisabled: PropTypes.bool,
  sortableContainerProps: PropTypes.object,
  sortableElementProps: PropTypes.object,
  locale: PropTypes.object,

  formatter: PropTypes.func,
  beforeUpload: PropTypes.func,
  onSuccess: PropTypes.func,
  onError: PropTypes.func,
  onRemove: PropTypes.func,
  onChange: PropTypes.func,
  onShowUploadError: PropTypes.func,
  onSortEnd: PropTypes.func,
  onCrop: PropTypes.func,
  onCropError: PropTypes.func,
  onCropGetBase64Data: PropTypes.func,
  onShowCrop: PropTypes.func,
  onUploadClick: PropTypes.func,
};

const defaultProps = {
  value: null,
  defaultValue: null,
  sign: 'upload',
  action: '',
  accept: 'image/png, image/jpg, image/jpeg, image/gif, image/bmp',
  name: 'file',
  headers: null,
  withCredentials: true,
  disabled: false,
  limit: 8,
  maxSize: 10485760,
  hasThumbnail: true,
  hasDelete: true,
  dropZoneProps: {},
  cropGetBase64Type: 'load', // 1. load 下载图片获取base64 | 2. api 调用接口获取base64
  cropDisabled: false,
  cropMinWidth: 500,
  cropMinHeight: 500,
  cropList: [],
  cropProps: {},
  sortDisabled: false,
  sortableContainerProps: {},
  sortableElementProps: {},
  locale: {
    title: 'upload', 
    width: 'width',
    height: 'height',
    saveClose: 'save and close',
    addPicture: 'Add Picture',
    thumbnail: 'Thumbnail',
    mainImage: 'Main Image',
    uploadError: 'Upload Error',
    maxSizeError: 'Image size should not exceed 10M. Upload a different image.',
    cropError: 'Image clipping failed',
    duplicate: 'Duplicate Pictures',
    cropSizeTip: 'Dimensions should be between 500x500 and 2000x2000',
    uploadTips: ['Drag and drop pictures below to upload. Maximum 8 pictures, size between 500*500 and 2000*2000 px.'],
  },

  formatter: null,
  beforeUpload: null,
  onSuccess: null,
  onError: null,
  onRemove: null,
  onChange: null,
  onShowUploadError: null,
  onSortEnd: null,
  onCrop: null,
  onCropError: null,
  onCropGetBase64Data: null,
  onShowCrop: null,
  onUploadClick: null,
};

@autobind
class UploadWrapper extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const props = omit(this.props, []);
    return (
      <div>
        <Upload
          {...props}
          maxSize={100000000}
          hasDownload={false}
          beforeUpload={async (file) => {
            let sizeCheck = await Tools.getFileSize(file);
            if(!sizeCheck){
                console.log('beforeUpload error')
                return false;
            }
            console.log('beforeUpload success')
            return true;
          }}
        />
      </div>
    );
  }
}

UploadWrapper.propTypes = propTypes;
UploadWrapper.defaultProps = defaultProps;

export default UploadWrapper;