import React from 'react';
import ReactDOM from 'react-dom';
import Upload from '..';

const defaultValue = [
  {
    uid: '0',
    name: 'IMG.png',
    state: 'done',
    url:
    'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    downloadURL:
    'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    imgURL:
    'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    size: 2000,
  },
];
ReactDOM.render(
  <div style={{ background: '#f3f3f3', padding: '24px' }}>
    <Upload
      listType="image"
      action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
      // accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
      beforeUpload={beforeUpload}
      theme="grey"
      onChange={onChange}
      defaultValue={defaultValue}
    />
    <br />
    <Upload
      action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
      beforeUpload={beforeUpload}
      onChange={onChange}
      theme="grey"
      listType="text"
      defaultValue={defaultValue}
    />
    <br />
    <Upload.Dragger
      action='http://118.31.33.81/docs/upload'
      listType="text"
      // disabled
      theme="grey"
      withCredentials = {false}
      // @ts-ignore
      onDrop={onDrop}
    />
    <br />
    <Upload.Card
      listType="card"
      action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
      accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
      onChange={onChange}
      useDataURL
      theme="grey"
      // disabled
      defaultValue={[
        {
          uid: '0',
          name: 'IMG.png',
          state: 'done',
          url:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          downloadURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          imgURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        },
        {
          uid: '1',
          name: 'IMG.png',
          state: 'done',
          url:
          'https://img.alicdn.com/tfs/TB1x4QlgxYaK1RjSZFnXXa80pXa-1400-742.png',
          downloadURL:
          'https://img.alicdn.com/tfs/TB1x4QlgxYaK1RjSZFnXXa80pXa-1400-742.png',
          imgURL:
          'https://img.alicdn.com/tfs/TB1x4QlgxYaK1RjSZFnXXa80pXa-1400-742.png',
        },
        {
          uid: '2',
          name: 'IMG.png',
          state: 'done',
          url:
          'https://img.alicdn.com/tfs/TB1dcWosRjTBKNjSZFwXXcG4XXa-684-1000.png',
          downloadURL:
          'https://img.alicdn.com/tfs/TB1dcWosRjTBKNjSZFwXXcG4XXa-684-1000.png',
          imgURL:
          'https://img.alicdn.com/tfs/TB1dcWosRjTBKNjSZFwXXcG4XXa-684-1000.png',
        },
        {
          uid: '3',
          name: 'IMG.png',
          percent: 50,
          state: 'uploading',
          url:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          downloadURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          imgURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        },
        {
          uid: '4',
          name: 'IMG.png',
          state: 'error',
          url:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          downloadURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
          imgURL:
          'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        },
      ]}
    />
  </div>
  ,
  document.getElementById('upload-demo-19'),
);

function beforeUpload(info) {
  console.log('beforeUpload callback : ', info);
}

function onChange(info) {
  console.log('onChange callback : ', info);
}

function onDrop(fileList) {
  console.log('drop callback : ', fileList);
}