import React, { useEffect, useRef, useState } from 'react';
import { Modal, Tooltip } from 'antd';
import classNames from 'classnames';
import { ApolloUploadProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import s from './index.less';
import Upload from '../../extra/upload';
import addIcon from '../../../../assets/addIcon.png';

export const ApolloUpload = (props: ApolloUploadProps) => {
    const { isMultiple, onEmitChange, onChange, disabled, origin } = props;
    const selfProps = antiAssign(props, ['onChange', 'value']);
    if (isMultiple) {
        selfProps.multiple = true;
    } else {
        selfProps.multiple = false;
        selfProps.maxLength = 1;
    }
    const [value, setValue] = useState(props.value || []);
    const changeValue = (value) => {
        setValue(value);
    };
    const [visible, setVisible] = useState(false);
    const refHelper = useRef(visible);
    const toggleUploadDialog = (flag) => {
        refHelper.current = flag;
        setVisible(flag);
    };
    // 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听
    useEffect(() => {
        document.addEventListener('click', onBlur, false);
        if (origin !== 'editForm') {
            toggleUploadDialog(true);
        }
        return () => {
            document.removeEventListener('click', onBlur, false);
        };
    }, []);
    const onBlur = () => {
        // 当弹框显示时，不触发emit事件
        if (refHelper.current) {
            return;
        }
        if (typeof onEmitChange === 'function') {
            onEmitChange(props.value);
        }
    };
    const onOk = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
        if (typeof onChange === 'function') {
            onChange(value);
        }
        toggleUploadDialog(false);
    };
    const onCancel = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(props.value);
        }
        toggleUploadDialog(false);
    };
    const onClickContainer = (e) => {
        e.stopPropagation(); // 阻止事件冒泡
        e.nativeEvent.stopImmediatePropagation();
    };
    let containerClass = s.container;
    if (disabled) {
        containerClass = classNames(containerClass, s.disabled);
    }
    if (origin === 'editForm') {
        containerClass = classNames(containerClass, s.editForm);
    }
    return (
        <div className={containerClass} onClick={onClickContainer}>
            {value &&
                value.map((item, i) => {
                    return (
                        <div key={i} className={s.picContainer}>
                            <Tooltip placement="bottom" title={item.name}>
                                <img
                                    className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
                                    src={item.thumbUrl}
                                />
                            </Tooltip>
                        </div>
                    );
                })}
            {!disabled && origin === 'editForm' && (
                <div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
                    <img alt="" className={s.addIcon} src={addIcon} />
                </div>
            )}
            <Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
                <div className={s.uploadContainer}>
                    <Upload {...selfProps} value={props.value} onChange={changeValue} />
                </div>
            </Modal>
        </div>
    );
};
