import React from 'react';

interface NumberFormatterProps {
    value: number;
    onChange: (value: number) => void;
    name?: string;
    className?: string;
    placeholder?: string;
    max?: number | undefined;
    min?: number | undefined;
    disabled?: boolean;
    id?: string;
}

const NumberFormatter: React.FC<NumberFormatterProps> = ({ value, onChange, name, className, placeholder, max, min, disabled, id }) => {
    const formatWithDot = (val: string): string => {
        return val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    };

    const removeDots = (val: string): string => {
        return val.replace(/\./g, '');
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        let rawValue = e.target.value.replace(/\D/g, '');
        let num = Number(removeDots(rawValue));
        if (max !== undefined && !Number.isNaN(max) && num > max) {
            num = max;
        }
        if (min !== undefined && !Number.isNaN(min) && num < min) {
            num = min;
        }
        onChange(num);
    };

    return <input type="text" id={id} name={name} value={formatWithDot(value.toString())} onChange={handleChange} className={className} placeholder={placeholder} max={max} min={min} disabled={disabled} />;
};

export default NumberFormatter;