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 { Upload as NextUpload } from '@alifd/next';
import { getTheme } from '../utils/getTheme';
// CardUpload
// 图片预览功能，只有图片列表在全部完成上传状态时才有
const showImg = url => {
    Dialog.show({
        title: 'img preview',
        content: React.createElement("img", { src: url, style: { width: 400, height: 400 } }),
        footer: false,
    });
};
class CardUpload extends Component {
    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 React.createElement("div", { className: "upload-card-hover-warps" },
                    React.createElement("img", { src: file.url, style: { maxWidth: '100%', maxHeight: '100%' } }),
                    React.createElement("span", { className: "extra-icons" },
                        React.createElement(Button
                        // text
                        , { 
                            // text
                            onClick: e => {
                                e.preventDefault();
                                showImg(file.url);
                            }, size: "medium", style: { background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 } },
                            React.createElement(Icon, { type: "eye", style: { color: '#fff', marginRight: 12, cursor: 'pointer' } })),
                        React.createElement(Button, { size: "medium", component: "a", href: file.url, target: "_blank", style: { background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 } },
                            React.createElement(Icon, { type: "download", style: { color: '#fff', cursor: 'pointer' } })),
                        React.createElement(Icon, { onClick: remove, type: "close", style: {
                                position: 'absolute',
                                right: 2,
                                top: 2,
                                color: '#fff',
                                cursor: 'pointer',
                            } })));
            }
            else if (file.state === 'error') {
                return React.createElement("div", { className: "upload-card-hover-warps" },
                    React.createElement("span", { className: "extra-icons" },
                        React.createElement(Icon, { onClick: remove, type: "close", style: {
                                position: 'absolute',
                                right: 2,
                                top: 2,
                                color: '#737373',
                                cursor: 'pointer',
                            } })),
                    React.createElement(Icon, { type: "cry", style: {
                            position: 'absolute',
                            left: 42,
                            top: 29,
                            color: '#c82727',
                            cursor: 'pointer',
                        } }));
            }
        };
        return (React.createElement(NextUpload.Card, Object.assign({}, this.props, { 
            // @ts-ignore
            // itemRender={disabled ? undefined : itemRender}
            className: cls(className, {
                [`${prefix}white`]: theme === 'white',
                [`${prefix}grey`]: theme === 'grey',
            }), 
            // @ts-ignore
            itemRender: itemRender })));
    }
}
CardUpload.contextTypes = {
    theme: PropTypes.string,
};
// DraggerUpload
class DraggerUpload extends Component {
    constructor(props) {
        super(props);
        this.handleProgress = () => {
            this.setState({
                progress: true,
            });
        };
        this.handleChange = () => {
            this.setState({
                progress: false,
            });
        };
        this.state = {
            progress: false,
        };
    }
    render() {
        const { prefix = 'next-', listType = 'text', className, children, onProgress, size } = this.props;
        const theme = getTheme(this.context, this.props);
        return (React.createElement(NextUpload, Object.assign({}, this.props, { listType: listType, dragable: true, 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',
            }) }),
            React.createElement("div", { className: `${prefix}upload-drag` },
                React.createElement("p", { className: `${prefix}upload-drag-icon` },
                    React.createElement(Icon, { type: "upload" })),
                React.createElement("p", { className: `${prefix}upload-drag-text` },
                    "\u62D6\u62FD\u81F3\u6B64\uFF0C\u6216 ",
                    ' ',
                    " ",
                    React.createElement("a", { className: `${prefix}upload-drag-a` }, "\u70B9\u51FB\u4E0A\u4F20"))),
            children));
    }
}
DraggerUpload.contextTypes = {
    theme: PropTypes.string,
};
// Upload
class Upload extends Component {
    constructor(props) {
        super(props);
        this.handleProgress = () => {
            this.setState({
                progress: true,
            });
        };
        this.handleChange = (...args) => {
            this.setState({
                value: args[0],
                progress: false,
            });
            const { onChange } = this.props;
            onChange && onChange.apply(null, [...args]);
        };
        // 图片预览功能，只有图片列表在全部完成上传状态时才有
        this.showImg = url => {
            Dialog.show({
                title: 'img preview',
                content: React.createElement("img", { src: url, style: { width: 400, height: 400 } }),
                footer: false,
            });
        };
        this.actionRender = file => {
            return (React.createElement("span", { className: "extra-icons", style: { position: 'absolute', right: 50, top: '50%' } },
                React.createElement(Button
                // text
                , { 
                    // text
                    onClick: e => {
                        e.preventDefault();
                        this.showImg(file.url);
                    }, size: "medium", style: { background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 } },
                    React.createElement(Icon, { type: "eye", style: { color: '#737373', marginRight: 12, cursor: 'pointer' } })),
                React.createElement(Button, { size: "medium", component: "a", href: file.url, target: "_blank", style: { background: 'transparent', borderColor: 'transparent', boxShadow: 'none', padding: 0 } },
                    React.createElement(Icon, { type: "download", style: { color: '#737373', cursor: 'pointer' } }))));
        };
        this.state = {
            progress: false,
            value: props.value || props.defaultValue,
        };
    }
    render() {
        const theme = getTheme(this.context, this.props);
        const { prefix = 'next-', className, onProgress, size = 'small', listType, actionRender } = this.props;
        return (React.createElement(NextUpload, Object.assign({}, 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, 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);
