import React, { useEffect, useRef, useState } from 'react';
import { Input } from 'antd';
import IconFont from '../../extra/iconFont';
import styles from './styles.less';
import { ApolloLinkProps } from '../editInterface';

const Link = (props: ApolloLinkProps) => {
    const { onEmitChange } = props;
    const [value, setValue] = useState(props.value);
    const dom = useRef(value);
    const changeText = (i, e) => {
        const newValue = (value && value.slice()) || [];
        newValue[i].text = e.target.value;
        setValue(newValue);
        dom.current = newValue;
    };
    const changeValue = (i, e) => {
        const newValue = (value && value.slice()) || [];
        newValue[i].value = e.target.value;
        setValue(newValue);
        dom.current = newValue;
    };
    const addLink = () => {
        const newValue = (value && value.slice()) || [];
        newValue.push({ text: '', value: '' });
        setValue(newValue);
        dom.current = newValue;
    };
    const delLink = (i) => {
        let newValue = (value && value.slice()) || [];
        newValue.splice(i, 1);
        setValue(newValue);
        dom.current = newValue;
    };
    const emitChange = (value) => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
    };
    const onBlur = () => {
        emitChange(dom.current);
    };
    useEffect(() => {
        document.addEventListener('click', onBlur, false);
        return () => {
            document.removeEventListener('click', onBlur, false);
        };
    }, []);
    const onClick = (e) => {
        e.stopPropagation(); //阻止事件冒泡
        e.nativeEvent.stopImmediatePropagation();
    };
    return (
        <div className={styles.container} onClick={onClick}>
            {value &&
                value.map((link, i) => {
                    return (
                        <div key={i} className={styles.content}>
                            <div className={styles.row}>
                                <span className={styles.label}>显示文字：</span>
                                <Input className={styles.input} value={link.text} onChange={changeText.bind(null, i)} />
                            </div>
                            <div className={styles.row}>
                                <span className={styles.label}>链接地址：</span>
                                <Input
                                    className={styles.input}
                                    value={link.value}
                                    onChange={changeValue.bind(null, i)}
                                />
                                <div className={styles.delContainer} onClick={delLink.bind(null, i)}>
                                    <IconFont className={styles.del} type="iconshanchu" />
                                </div>
                            </div>
                        </div>
                    );
                })}
            <div className={styles.btn} onClick={addLink}>
                <IconFont className={styles.icon} type="iconxinzeng" />
            </div>
        </div>
    );
};
export default Link;