import * as React from 'react';
import { NumericFormat } from 'react-number-format';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

interface CurrencyInputProps
    extends Omit<
        React.ComponentProps<typeof Input>,
        'onChange' | 'value' | 'type' | 'defaultValue'
    > {
    prefix?: string;
    suffix?: string;
    allowNegative?: boolean;
    decimalScale?: number;
    thousandSeparator?: boolean | string;
    fixedDecimalScale?: boolean;
    decimalSeparator?: string;
    onValueChange?: (values: {
        formattedValue: string;
        value: string | number;
        floatValue: number | undefined;
    }) => void;
    value?: string | number;
}

/**
 * Currency input component using react-number-format with shadcn Input styling
 *
 * @example Indonesian Rupiah (IDR) - no decimals
 * <CurrencyInput prefix="Rp " thousandSeparator="." />
 *
 * @example US Dollars (USD)
 * <CurrencyInput prefix="$" thousandSeparator="," decimalSeparator="." decimalScale={2} />
 *
 * @example No prefix (pure number)
 * <CurrencyInput thousandSeparator="," />
 */
const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
    (
        {
            className,
            prefix = '',
            suffix = '',
            allowNegative = false,
            decimalScale = 0,
            thousandSeparator = true,
            fixedDecimalScale = false,
            decimalSeparator = ',',
            onValueChange,
            value,
            ...props
        },
        ref
    ) => {
        return (
            <NumericFormat
                prefix={prefix}
                suffix={suffix}
                allowNegative={allowNegative}
                decimalScale={decimalScale}
                thousandSeparator={thousandSeparator}
                fixedDecimalScale={fixedDecimalScale}
                decimalSeparator={decimalSeparator}
                value={value}
                onValueChange={(values) => {
                    onValueChange?.({
                        formattedValue: values.formattedValue,
                        value: values.value,
                        floatValue: values.floatValue,
                    });
                }}
                customInput={Input}
                getInputRef={ref}
                className={cn(className)}
                {...props}
            />
        );
    }
);

CurrencyInput.displayName = 'CurrencyInput';

export { CurrencyInput };