import React, { forwardRef } from 'react';
import { InputGroup } from '@orchard/frontend-react-components';
import NumberInput from '../number-input/number-input';

type Props = React.ComponentProps<typeof NumberInput> & {
    value: number | null;
    onChange(value: number | null): void;
    placeholder?: string;
    currency: string | null;
    inputGroupClass: string;
    forwardedRef?:
    | ((instance: HTMLInputElement | null) => void)
    | React.MutableRefObject<HTMLInputElement | null>
    | null;
};

const CurrencyInput: React.FC<Props> = ({
    value,
    onChange,
    placeholder,
    inputGroupClass = 'CurrencyInput-input-group',
    currency,
    forwardedRef,
    ...forwardedProps
}) => (
    <InputGroup
        className={ inputGroupClass }
        { ...(forwardedProps.size ? { size: forwardedProps.size } : {}) }
    >
        <NumberInput
            { ...forwardedProps }
            value={ value }
            onChange={ onChange }
            placeholder={ placeholder }
            ref={ forwardedRef }
            allowZero={ false }
        />
        <InputGroup.Append>
            <InputGroup.Text>
                { currency }
            </InputGroup.Text>
        </InputGroup.Append>
    </InputGroup>
);

export default forwardRef<HTMLInputElement, Props>((props, ref) => (
    <CurrencyInput { ...props } forwardedRef={ ref } />
));