/// <reference types="react" />

import * as React from "react";

export interface ImageUploadProps extends React.HTMLAttributes<HTMLElement> {}

export class ImageUpload extends React.Component<ImageUploadProps, any> {}

export interface DragUploadProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式前缀
   */
  prefix?: string;

  /**
   * 可选参数，拖拽到达拖拽区域回调函数
   */
  onDragOver?: () => void;

  /**
   * 可选参数，拖拽释放回调函数，参数为拖拽的文件
   */
  onDrop?: () => void;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;
}

export class DragUpload extends React.Component<DragUploadProps, any> {}

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  onChange?: any;
  onError?: any;
}

export interface CropUploadProps extends HTMLAttributesWeak {
  /**
   * 样式前缀
   */
  prefix?: string;

  /**
   * 必选参数，上传的地址。使用 fileserver，跨域解决方案参考 [fileserver 接入](#fileserver)，[`非 fileserver` 使用说明](#not-fileserver)
   */
  action?: string;

  /**
   * 可选参数，传递给服务器的文件参数
   */
  name?: string;

  /**
   * 可选参数，设置裁剪图片生成的尺寸，如设置 `100`，会生成 `100*100` 的图片
   */
  cropSize?: number | {};

  /**
   * 可选参数，设置裁剪框的最小尺寸
   */
  minCropBoxSize?: number;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 可选参数，设置上传的请求头部
   */
  headers?: {};

  /**
   * 可选参数，数据格式化函数，配合自定义 `action` 使用，参数为服务器的响应数据，详见 [formatter](#formatter)
   */
  formatter?: () => void;

  /**
   * 上传额外传参（如果使用 `fileserver` 上传，参数格式为 { scene: '场景名' }）
   */
  data?: {} | (() => void);

  /**
   * 自定义语言包，会与默认提供的语言包做合并操作，请严格按照默认语言包的格式，参考 [demo](http://next.alibaba-inc.com/demo/pc/upload#react-Upload-2)
   */
  locale?: {};

  /**
   * 是否使用预览功能
   */
  preview?: boolean;

  /**
   * 预览展示列表，用来配置预览元素。目前仅支持 `80`、`60`、`40` 三种，例如，配置 `[80, 40]`，会展示 `80*80` 以及 `40*40` 两种尺寸
   */
  previewList?: Array<any>;

  /**
   * 裁剪弹层自定义类名
   */
  popupClassName?: string;

  /**
   * 裁剪比例，例如 `1 / 2` 表示 `宽 / 高`。**注意：1、设置了裁剪比例，而且值不等于 `1` 时，不能使用预览功能；2、设置成 'auto' 可以支持任意裁剪比例**
   */
  aspectRatio?: number;

  /**
   * 可选参数，[定义裁剪框的模式](https://github.com/fengyuanchen/cropperjs#viewmode)
   */
  viewMode?: number;

  /**
   * 可选参数，[定义自动裁剪区域的尺寸（百分比）](https://github.com/fengyuanchen/cropperjs#autocroparea)，介于 `0` 与 `1` 之间的值
   */
  autoCropArea?: number;

  /**
   * 图片是否可以伸缩
   */
  zoomable?: boolean;

  /**
   * 可选参数，选择文件后、唤起裁剪框前的钩子，参数为上传的文件。若返回 `false`、`Promise.reject()` 或者 `Promise.resolve(false)` 都会阻断后续流程，不会唤起裁剪框及后续动作
   */
  beforeCrop?: () => void;

  /**
   * 完成裁剪并上传的回调函数，参数为裁剪后的文件的base64字符串数据
   */
  onCrop?: () => void;

  /**
   * 可选参数，裁剪文件改变时触发
   */
  onChange?: () => void;

  /**
   * 可选参数，点击裁剪之后、上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传
   */
  beforeUpload?: () => void;

  /**
   * 上传成功回调函数，`res` 为后台响应，`dataUrl` 为裁剪后的文件的base64字符串数据(注意与 `Upload` 的参数区别)
   */
  onSuccess?: () => void;

  /**
   * 可选参数，上传失败回调函数，参数为上传失败的文件信息
   */
  onError?: () => void;

  /**
   * 图片类型
   */
  accept?: string;
}

export class CropUpload extends React.Component<CropUploadProps, any> {}

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  onError?: any;
}

export interface CoreProps extends HTMLAttributesWeak {
  /**
   * 可选参数，自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 必选参数，上传的地址
   */
  action: string;

  /**
   * 可选参数，传递给服务器的文件参数
   */
  name: string;

  /**
   * 可选参数，是否禁用上传功能
   */
  disabled?: boolean;

  /**
   * 可选参数，是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件
   */
  multiple?: boolean;

  /**
   * 可选参数，是否支持拖拽上传，`ie10+` 支持。
   */
  dragable?: boolean;

  /**
   * 可选参数，接受上传的文件类型，详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)， [兼容性见](http://caniuse.com/#feat=input-file-accept)
   */
  accept?: string;

  /**
   * 上传额外传参
   */
  data?: {} | (() => void);

  /**
   * 可选参数，设置上传的请求头部
   */
  headers?: {};

  /**
   * 可选参数，是否允许请求携带 cookie
   */
  withCredentials?: boolean;

  /**
   * 可选参数，上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传
   */
  beforeUpload?: () => void;

  /**
   * 可选参数，开始上传文件的钩子，参数为上传的文件。如果开启了 `multiple`，参数为文件列表
   */
  onStart?: () => void;

  /**
   * 可选参数，正在上传文件的钩子，参数为上传的事件以及文件
   */
  onProgress?: () => void;

  /**
   * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
   */
  onSuccess?: () => void;

  /**
   * 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件
   */
  onError?: () => void;

  /**
   * 可选参数，中断上传请求回调函数，参数为中断事件以及文件
   */
  onAbort?: () => void;
}

export class Core extends React.Component<CoreProps, any> {}

export interface ListProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 文件列表，数据格式请参考 文件对象
   */
  listType?: "text" | "text-image" | "picture-card";

  /**
   * 文件列表
   */
  fileList?: Array<any>;

  /**
   * 渲染
   */
  cell?: (value: {}, idx: number) => React.ReactElement<any>;
}

export class List extends React.Component<ListProps, any> {}
interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  onChange?: any;
  onError?: any;
}

export interface UploadProps extends HTMLAttributesWeak {
  /**
   * 样式前缀
   */
  prefix: string;

  /**
   * 必选参数，上传的地址
   */
  action?: string;

  /**
   * 上传文件列表，数据格式请参考
   */
  fileList?: Array<any>;

  /**
   * 默认上传文件列表，数据格式请参考
   */
  defaultFileList?: Array<any>;

  /**
   * 上传列表的样式
   */
  listType?: "text" | "text-image" | "picture-card";

  /**
   * 上传额外传参（如果使用 `fileserver` 上传，参数格式为 { scene: '场景名' }）
   */
  data?: {} | (() => void);

  /**
   * 数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)
   */
  formatter?: () => void;

  /**
   * 选择上传的文件的最大尺寸（单位：Byte）
   */
  maxSize?: number;

  /**
   * 是否在上传前校验maxsize
   */
  checkMaxSizeBeforeUpload?: boolean;

  /**
   * 语言种类，支持 `en-us`、`zh-cn`、`zh-tw`
   */
  language?: string;

  /**
   * 自定义语言包，会与默认提供的语言包做合并操作，[详细参考](http://gitlab.alibaba-inc.com/next/upload/blob/master/src/locale/index.js)
   */
  locale?: {};

  /**
   * 最大文件上传个数
   */
  limit?: number;

  /**
   * 可选参数，是否支持拖拽上传，`ie10+` 支持。
   */
  dragable?: boolean;

  /**
   * 可选参数，是否禁用上传功能
   */
  disabled?: boolean;

  /**
   * 是否显示上传列表
   */
  showUploadList?: boolean;

  /**
   * 上传文件改变时的状态
   */
  onChange?: (info: {}) => void;

  /**
   * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
   */
  onSuccess?: () => void;

  /**
   * 移除文件回调函数，详见 [onRemove](#onRemove)
   */
  onRemove?: () => void;

  /**
   * 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件
   */
  onError?: () => void;

  /**
   * 自定义class
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 子元素
   */
  children?: React.ReactNode;

  /**
   * 可选参数，接受上传的文件类型，详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)， [兼容性见](http://caniuse.com/#feat=input-file-accept)
   */
  accept?: string;

  /**
   * 可选参数，设置上传的请求头部
   */
  headers?: {};

  /**
   * 传递给服务器的文件参数
   */
  name?: string;

  /**
   * 可选参数，是否允许请求携带 cookie
   */
  withCredentials?: boolean;

  /**
   * 可选参数，上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传
   */
  beforeUpload?: () => void;
}

export default class Upload extends React.Component<UploadProps, any> {
  static ImageUpload: typeof ImageUpload;
  static DragUpload: typeof DragUpload;
  static CropUpload: typeof CropUpload;
  static Core: typeof Core;
  static List: typeof List;
}