import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { useEffect, useRef, useState } from 'react';
import { fmtNombre, lireNombre } from '../format';

interface Props {
    value: number;
    onChange: (valeur: number) => void;
    decimales?: number;
    disabled?: boolean;
    className?: string;
    'aria-label'?: string;
    id?: string;
}

/**
 * Saisie d'un nombre à la française (« 1 234,5 »).
 *
 * Garde le TEXTE tapé tant que le champ a le focus : sans cela, « 12, » serait
 * relu en 12 et la virgule disparaîtrait sous les doigts. Le nombre remonte à
 * chaque frappe (l'aperçu se met à jour), le texte se reformate à la sortie.
 */
export function NumberInput({ value, onChange, decimales = 3, disabled, className, id, ...rest }: Props) {
    const [texte, setTexte] = useState(() => fmtNombre(value, decimales));
    const focus = useRef(false);

    useEffect(() => {
        if (!focus.current) setTexte(fmtNombre(value, decimales));
    }, [value, decimales]);

    return (
        <Input
            id={id}
            inputMode="decimal"
            autoComplete="off"
            disabled={disabled}
            aria-label={rest['aria-label']}
            className={cn('text-right tabular-nums', className)}
            value={texte}
            onFocus={(e) => {
                focus.current = true;
                e.currentTarget.select();
            }}
            onBlur={() => {
                focus.current = false;
                setTexte(fmtNombre(value, decimales));
            }}
            onChange={(e) => {
                const saisie = e.target.value.replace(/[^\d\s,.\-\u00a0\u202f]/g, '');
                setTexte(saisie);
                onChange(lireNombre(saisie));
            }}
        />
    );
}