import React, { useEffect, useRef, useState } from 'react';
import { Checkbox } from 'antd';
import styles from './styles.less';
import { ApolloCheckboxProps, ApolloCheckboxGroupProps } from '../editInterface';

import { antiAssign } from '@/apollo-table/utils/utils';

const ApolloCheckbox = (props: ApolloCheckboxProps) => {
    const { onChange, emitTrigger, onEmitChange, label } = props;
    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'label']);
    const [checked, setChecked] = useState(!!props.value);
    const changeValue = (e) => {
        setChecked(e.target.checked);
        if (typeof onChange === 'function') {
            onChange(e.target.checked);
        }
        if (!emitTrigger || emitTrigger === 'onChange') {
            emitChange(e.target.checked);
        }
    };

    const emitChange = (value) => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
    };
    const onBlur = (e) => {
        emitChange(e.target.checked);
    };
    if (emitTrigger === 'onBlur') {
        selfProps.onBlur = onBlur;
    }
    return (
        <div className={styles.container}>
            <Checkbox className={styles.checkbox} {...selfProps} checked={checked} onChange={changeValue}>
                {label}
            </Checkbox>
        </div>
    );
};
const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => {
    const { onChange, emitTrigger, onEmitChange } = props;
    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
    const [value, setValue] = useState(props.value);
    const dom = useRef(value);
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);

    const changeValue = (value) => {
        setValue(value);
        dom.current = value;
        if (typeof onChange === 'function') {
            onChange(value);
        }
        if (!emitTrigger || emitTrigger === 'onChange') {
            emitChange(value);
        }
    };

    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}>
            <Checkbox.Group className={styles.checkboxGroup} {...selfProps} value={value} onChange={changeValue} />
        </div>
    );
};
const ApolloCheck = (props) => {
    const { isMultiple } = props;

    if (isMultiple) {
        const groupProps = antiAssign(props, ['columnConfig', 'isMultiple']);
        return ApolloCheckboxGroup(groupProps);
    }
    const selfProps = antiAssign(props, ['columnConfig', 'isMultiple', 'options']);
    return ApolloCheckbox(selfProps);
};

export default ApolloCheck;