import { Input } from "antd";
import { useEffect, useState, useRef } from "react";

const InputNumber = ({ 
    name,
    value = 0,
    onChange,
    ...props
}) => {
    const [inputValue, setInputValue] = useState(
        value !== null && value !== undefined ? value.toString() : ''
    );

    useEffect(() => {
        const newValue = value !== null && value !== undefined ? value.toString() : '';
        setInputValue(newValue);
    }, [value]);

    const handleChange = (e) => {
        const rawValue = e.target.value;
        if (/^\d*$/.test(rawValue)) {
            setInputValue(rawValue);
            const numValue = rawValue === '' ? 0 : parseInt(rawValue, 10);
            
            // Kirim event object sintetis yang konsisten dengan handler biasa
            onChange?.({
                target: {
                    name: name,
                    value: numValue
                }
            });
        }
    };

    const handleFocus = (e) => {
        // Pilih semua teks saat fokus (opsional)
        e.target.select();
    };

    return (
        <Input
            {...props}
            name={name} // Teruskan name ke input
            value={inputValue}
            onChange={handleChange}
            onFocus={handleFocus}
            style={{ textAlign: 'left' }}
        />
    );
};

export { InputNumber };