import React, { forwardRef, ReactNode } from 'react';
import { Input, InputNumber } from 'antd'
import { InputNumberProps } from 'antd/lib/input-number'
import classNames from 'classnames';
const InputGroup = Input.Group;

interface InputNumberRich {
    addonBefore?: string | ReactNode,
    addonAfter?: string | ReactNode,
    className?: string,
    [propsName: string]: any,
}

export const InputNumberRich: React.FC<InputNumberRich & InputNumberProps> = forwardRef(({ addonBefore, addonAfter, className, ...restProps }, ref) => {
    return (
        <div ref={ref as any}>
            <InputGroup compact className={classNames('jad-input-group', className)}>
                {addonBefore && <span className={'jad-addon-before'}>{addonBefore}</span>}
                <InputNumber
                    {...restProps}
                    className={classNames('jad-rich-input-number')}
                />
                {addonAfter && <span className={'jad-addon-after'} >{addonAfter}</span>}
            </InputGroup>
        </div>
    )
})