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

export const ApolloUpload = (props: ApolloUploadProps) => {
    const {
        isMultiple, onEmitChange, onChange, disabled, origin, tableId,
    } = props;
    const selfProps = antiAssign(props, [
        'onChange',
        'value',
        'onEmitChange',
        'tableId',
        'rowData',
        'cellRenderProps',
        'maxPopHeight',
        'getPopupContainer',
        'getCalendarContainer',
        'isMultiple',
        'origin',
        'disableOptions',
        'rowId',
        'onBlurFn',
        'getInstanceDetail',
    ]);
    selfProps.disabled = !!props.disabled;
    if (isMultiple) {
        selfProps.multiple = true;
    } else {
        selfProps.multiple = false;
        selfProps.maxLength = 1;
    }
    const [value, setValue] = useState<any>([]);
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    const changeValue = (value: any) => {
        setValue(value);
        if (origin === 'editForm') {
            if (typeof onChange === 'function') {
                onChange(value);
            }
            // onBlurFn({ ...props, value });
        }
    };
    const [visible, setVisible] = useState(false);
    const refHelper = useRef(visible);
    const toggleUploadDialog = (flag: boolean) => {
        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 clearEdit = () => {
        // 清除所有dom的编辑状态
        const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
        if (doms) {
            doms.forEach((item) => {
                item.setAttribute('data-editing-cell', '0');
            });
        }
    };
    const onBlur = () => {
        // 当弹框显示时，不触发emit事件
        if (refHelper.current) {
            return;
        }
        if (typeof onEmitChange === 'function') {
            onEmitChange(props.value);
        }
        clearEdit();
    };
    const onOk = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
        if (typeof onChange === 'function') {
            onChange(value);
        }
        clearEdit();
        toggleUploadDialog(false);
    };
    const onCancel = () => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(props.value);
        }
        clearEdit();
        toggleUploadDialog(false);
    };
    const onClickContainer = (e: any) => {
        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}>
                <Upload {...selfProps} value={value} listType="picture-card" onChange={changeValue} />
            </div>
        );
    }
    return (
        <div className={containerClass} onClick={onClickContainer}>
            {value
                && value.map((item: any, i: number) => {
                    return (
                        <div key={i} className={s.picContainer}>
                            <Tooltip placement="bottom" title={item.name}>
                                <img
                                    alt=""
                                    className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
                                    src={item.thumbUrl}
                                />
                            </Tooltip>
                        </div>
                    );
                })}
            <Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
                <div className={s.uploadContainer}>
                    <Upload {...selfProps} value={props.value} onChange={changeValue} />
                </div>
            </Modal>
        </div>
    );
};