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

export const ApolloNumber = (props: ApolloNumberProps) => {
    const { onChange, origin, value }: any = props;
    const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
    const [inputVal, setInputVal] = useState(value)
    useEffect(() => {
        setInputVal(value);
    }, [value]);
    const changeValue = (newValue: any) => {
        if (typeof onChange === 'function') {
            onChange(newValue);
            setInputVal(inputVal);
        }
    };
    const { onEmitChange, ...o } = selfProps;
    const style: any = {};
    if (origin === 'editForm') {
        style.height = '32px';
    }
    const inputOnBlurFn = () => {
        if (typeof onBlurFn === 'function') {
            onBlurFn(props);
        }
    };
    return origin === 'editForm' ?
        <InputNumber value={inputVal} onBlur={inputOnBlurFn} className={styles.number} style={style} {...o} onChange={changeValue} />
        : <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
};