import clsx from "clsx";
import { forwardRef, KeyboardEvent } from "react";
import { NumericFormat } from "react-number-format";

interface DecimalInputProps {
    id?: string;
    value?: number;
    onChange: (value: number) => void;
    placeholder?: string;
    errors?: boolean;
    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
    size?: "default" | "lg";
    readOnly?: boolean;
    disabled?: boolean;
    prefix?: any;
    textAlign?: "left" | "center" | "right";
}

const DecimalInput = forwardRef<any, DecimalInputProps>(
    ({ id = "decimal-input", value, onChange, placeholder, errors = false, size = "default", readOnly = false, disabled = false, prefix = "Rp ", textAlign = "right", ...rest }, ref) => {
        return (
            <NumericFormat
                id={id}
                value={value}
                onValueChange={(values) => {
                    onChange(Number(values.value));
                }}
                decimalSeparator=","
                thousandSeparator="."
                allowNegative={false}
                allowLeadingZeros={false}
                placeholder={placeholder ?? ""}
                className={clsx('form-control', {
                    'is-invalid': errors,
                    'text-start': textAlign === 'left',
                    'text-center': textAlign === 'center',
                    'text-end': textAlign === 'right',
                })}
                getInputRef={ref}
                prefix={prefix}
                style={{ fontSize: size === 'lg' ? '1.25rem' : '1rem' }}
                readOnly={readOnly}
                disabled={disabled}
                {...rest}
            />
        );
    }
);

export default DecimalInput;