import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Button, Dialog, Icon } from '../index';
import { CommonThemeProps } from '../types';
import { CardProps as NextCardProps, UploadProps as NextUploadProps } from '@alifd/next/types/upload';
import { Upload as NextUpload } from '@alifd/next';
import { getTheme } from '../utils/getTheme';

interface UploadProps extends NextUploadProps, CommonThemeProps {
  size?: 'small' | 'medium' | 'large';
}

interface DraggerProps extends UploadProps { }

interface CardProps extends NextCardProps, CommonThemeProps { }

interface IUploadState {
  value?: any;
  progress?: boolean;
}

// CardUpload

// 图片预览功能，只有图片列表在全部完成上传状态时才有
const showImg = url => {
  Dialog.show({
    title: 'img preview',
    content: <img src={url} style={{ width: 400, height: 400 }} />,
    footer: false,
  });
};


class CardUpload extends Component<CardProps> {

  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {

    const { prefix = 'next-', className } = this.props;

    const theme = getTheme(this.context, this.props);
    // card预览功能
    const itemRender = (file, obj) => {
      const remove = obj && obj.remove || (() => { console.log('暂无删除回调。'); });
      if (file.state === 'done') {
        return <div className="upload-card-hover-warps">
          <img src={file.url} style={{ maxWidth: '100%', maxHeight: '100%' }} />
          <span className="extra-icons">
            <Button
            // text
              onClick={e => {
                e.preventDefault();
                showImg(file.url);
              }}
              size="medium"
              style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}
            >
              <Icon type="eye" style={{ color: '#fff', marginRight: 12, cursor: 'pointer' }} />
            </Button>
            <Button size="medium" component="a" href={file.url} target="_blank" style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}>
              <Icon type="download" style={{ color: '#fff', cursor: 'pointer' }} />
            </Button>
            <Icon
              onClick={remove}
              type="close"
              style={{
                position: 'absolute',
                right: 2,
                top: 2,
                color: '#fff',
                cursor: 'pointer',
              }}
            />
          </span>
        </div>;
      } else if (file.state === 'error') {
        return <div className="upload-card-hover-warps">
          <span className="extra-icons">
            <Icon
              onClick={remove}
              type="close"
              style={{
                position: 'absolute',
                right: 2,
                top: 2,
                color: '#737373',
                cursor: 'pointer',
              }}
            />
          </span>
          <Icon
            type="cry"
            style={{
              position: 'absolute',
              left: 42,
              top: 29,
              color: '#c82727',
              cursor: 'pointer',
            }}
          />
        </div>;
      }
    };
    return (
      <NextUpload.Card
        {...this.props}
        // @ts-ignore
        // itemRender={disabled ? undefined : itemRender}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
        // @ts-ignore
        itemRender={itemRender}
      >
      </NextUpload.Card>
    );
  }
}

// DraggerUpload
class DraggerUpload extends Component<DraggerProps, IUploadState> {

  constructor(props) {
    super(props);
    this.state = {
      progress: false,
    };
  }

  handleProgress = () => {
    this.setState({
      progress: true,
    });
  };

  handleChange = () => {
    this.setState({
      progress: false,
    });
  };

  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {

    const { prefix = 'next-', listType = 'text', className, children, onProgress, size } = this.props;

    const theme = getTheme(this.context, this.props);

    return (
      <NextUpload
        {...this.props}
        listType={listType}
        dragable
        onProgress={onProgress ? onProgress : this.handleProgress}
        onChange={this.handleChange}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}on-progress`]: this.state.progress === true,
          [`${prefix}all-finish`]: this.state.progress === false,
          [`${prefix}small`]: size === 'small',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}large`]: size === 'large',
          [`${prefix}text-list`]: listType === 'text',
          [`${prefix}img-list`]: listType === 'image',
        })}
      >
        <div className={`${prefix}upload-drag`}>
          <p className={`${prefix}upload-drag-icon`}>
            <Icon type="upload" />
          </p>
          <p className={`${prefix}upload-drag-text`}>
            拖拽至此，或 {' '} <a className={`${prefix}upload-drag-a`}>点击上传</a>
          </p>
        </div>
        {children}
      </NextUpload>);
  }
}

// Upload
class Upload extends Component<UploadProps, IUploadState> {
  static contextTypes: any;
  static Card: any;
  static Dragger: any;
  static Uploader: typeof NextUpload.Uploader;
  static Selecter: typeof NextUpload.Selecter;

  constructor(props) {
    super(props);
    this.state = {
      progress: false,
      value: props.value || props.defaultValue,
    };
  }

  handleProgress = () => {
    this.setState({
      progress: true,
    });
  };

  handleChange = (...args) => {
    this.setState({
      value: args[0],
      progress: false,
    });

    const { onChange } = this.props;
    onChange && onChange.apply(null, [ ...args ]);
  };

  // 图片预览功能，只有图片列表在全部完成上传状态时才有
  showImg = url => {
    Dialog.show({
      title: 'img preview',
      content: <img src={url} style={{ width: 400, height: 400 }} />,
      footer: false,
    });
  };

  actionRender = file => {
    return (
      <span className="extra-icons" style={{ position: 'absolute', right: 50, top: '50%' }}>
        <Button
          // text
          onClick={e => {
            e.preventDefault();
            this.showImg(file.url);
          }}
          size="medium"
          style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}
        >
          <Icon type="eye" style={{ color: '#737373', marginRight: 12, cursor: 'pointer' }} />
        </Button>
        <Button size="medium" component="a" href={file.url} target="_blank" style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}>
          <Icon type="download" style={{ color: '#737373', cursor: 'pointer' }} />
        </Button>
      </span>
    );
  };

  render() {

    const theme = getTheme(this.context, this.props);

    const { prefix = 'next-', className, onProgress, size = 'small', listType, actionRender } = this.props;

    return (<NextUpload
      {...this.props}
      className={cls(className, {
        [`${prefix}white`]: theme === 'white',
        [`${prefix}grey`]: theme === 'grey',
        [`${prefix}on-progress`]: this.state.progress === true,
        [`${prefix}all-finish`]: this.state.progress === false,
        [`${prefix}small`]: size === 'small',
        [`${prefix}medium`]: size === 'medium',
        [`${prefix}large`]: size === 'large',
        [`${prefix}text-list`]: listType === 'text',
        [`${prefix}img-list`]: listType === 'image',
      })}
      value={this.props.value ? this.props.value : this.state.value}
      onProgress={onProgress ? onProgress : this.handleProgress as any}
      actionRender={actionRender ? actionRender : (this.state.progress === false ? (listType === 'image' ? this.actionRender : undefined) : undefined)}
      onChange={this.handleChange}
    />);
  }
}

hoistNonReactStatics(Upload, NextUpload);

Upload.contextTypes = {
  theme: PropTypes.string,
};
Upload.Card = ConfigProvider.config(CardUpload);
Upload.Dragger = ConfigProvider.config(DraggerUpload);

export default ConfigProvider.config(Upload);