import React, { useEffect, useState } from 'react';
import { InputNumber } from 'antd';
import styles from './styles.less';
import { ApolloNumberProps } from '../editInterface';
import { antiAssign } from '@/apollo-table/utils/utils';

const ApolloNumber = (props: ApolloNumberProps) => {
    const { onChange, emitTrigger, onEmitChange } = props;
    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
    const [value, setValue] = useState(props.value);
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    const changeValue = (value) => {
        setValue(value);
        if (typeof onChange === 'function') {
            onChange(value);
        }
        if (!emitTrigger || emitTrigger === 'onChange') {
            emitChange(value);
        }
    };

    const onBlur = (e) => {
        emitChange(e.target.value);
    };

    const emitChange = (value) => {
        if (typeof onEmitChange === 'function') {
            onEmitChange(value);
        }
    };
    if (emitTrigger === 'onBlur') {
        selfProps.onBlur = onBlur;
    }

    return (
        <div className={styles.container}>
            <InputNumber className={styles.number} {...selfProps} value={value} onChange={changeValue} />
        </div>
    );
};
export default ApolloNumber;