import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Upload,Icon, Button } from "../src/index";

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

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

function onSuccess(res, file) {
  console.log('onSuccess callback : ', res, file)
}

function onError(file) {
  console.log('onError callback : ', file)
}
function onDragOver() {
  console.log('dragover callback')
}

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

storiesOf("Upload", module).add("Upload", () => {
  this.state = {
    selectedKeys: []
  }

  return (
    <div id='app-wrapper'>
      <div id='app'>
      <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"
      onPreview={onPreview}
      onChange={onChange}
      onSuccess={onSuccess}
      onError={onError}
      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://gw.alicdn.com/tfs/TB1Y4ucuAL0gK0jSZFtXXXQCXXa-1020-510.jpg',
          downloadURL:
            'https://gw.alicdn.com/tfs/TB1Y4ucuAL0gK0jSZFtXXXQCXXa-1020-510.jpg',
          imgURL:
            'https://gw.alicdn.com/tfs/TB1Y4ucuAL0gK0jSZFtXXXQCXXa-1020-510.jpg'
        },
        {
          uid: '2',
          name: 'IMG.png',
          state: 'done',
          url:
            'https://img.alicdn.com/tfs/TB1Y8vPtKbviK0jSZFNXXaApXXa-216-460.png',
          downloadURL:
            'https://img.alicdn.com/tfs/TB1Y8vPtKbviK0jSZFNXXaApXXa-216-460.png',
          imgURL:
            'https://img.alicdn.com/tfs/TB1Y8vPtKbviK0jSZFNXXaApXXa-216-460.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>
    <Upload.Dragger
        listType="image"
        action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
        accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
        onDragOver={onDragOver}
        onDrop={onDrop}
      />
      <Upload.Dragger
        listType="image"
        action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
        accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
        onDragOver={onDragOver}
        onDrop={onDrop}
      >
        <div className="next-upload-drag">
          <p className="next-upload-drag-text">
            <Icon type="upload" size='small' style={{color:'#1B58F4',marginRight:'6px'}} />
            拖拽至此,或
            <Button text>
              点击上传
            </Button>
          </p>
          <p className="next-upload-drag-hint">supports docx, xls, PDF </p>
        </div>
      </Upload.Dragger>
    </div>
      </div>
    </div>
  );
});