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 => {
    //   return (
    //     <div >
    //       <img src={file.url} style={{ maxWidth: '100%', maxHeight: '100%' }} />
    //       <div className={`${prefix}card-preview`}
    //         style={{
    //           position: 'absolute',
    //           top: 0,
    //           right: 0,
    //           bottom: 0,
    //           left: 0,
    //           background: 'rgba(0,0,0,.5)',
    //           color: '#ddd',
    //           display: 'flex',
    //           flexDirection: 'row',
    //           justifyContent: 'center',
    //           alignItems: 'center',
    //         }}
    //       >
    //         <Button
    //           // text
    //           onClick={e => {
    //             e.preventDefault();
    //             showImg(file.url);
    //           }}
    //           size="small"
    //           style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}
    //         >
    //           <Icon type="eye" style={{ marginRight: 12, cursor: 'pointer', color: '#fff' }} />
    //         </Button>
    //         <Button size="small" component="a" href={file.url} target="_blank" style={{ background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 }}>
    //           <Icon type="download" style={{ cursor: 'pointer', color: '#fff' }} />
    //         </Button>
    //       </div>
    //     </div>
    //   );
    // };

    return (
      <NextUpload.Card
        {...this.props}
        // @ts-ignore
        // itemRender={disabled ? undefined : itemRender}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
      >
      </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.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);
