import { useEffect, useState } from 'react';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText,
} from '@/components/ui/input-group';
import {
    centsToDisplay,
    displayToCents,
    isValidMoneyDisplay,
} from '@/lib/money';

type MoneyInputProps = {
    id: string;
    cents: number;
    onCentsChange: (cents: number) => void;
};

export function MoneyInput({ id, cents, onCentsChange }: MoneyInputProps) {
    const [display, setDisplay] = useState(() => centsToDisplay(cents));
    const [focused, setFocused] = useState(false);

    useEffect(() => {
        if (!focused) {
            setDisplay(centsToDisplay(cents));
        }
    }, [cents, focused]);

    return (
        <InputGroup>
            <InputGroupAddon>
                <InputGroupText>$</InputGroupText>
            </InputGroupAddon>
            <InputGroupInput
                id={id}
                inputMode="decimal"
                placeholder="0.00"
                autoComplete="off"
                value={display}
                onFocus={() => setFocused(true)}
                onBlur={() => {
                    setFocused(false);
                    const nextCents = displayToCents(display);
                    onCentsChange(nextCents);
                    setDisplay(centsToDisplay(nextCents));
                }}
                onChange={(event) => {
                    const next = event.target.value;

                    if (!isValidMoneyDisplay(next)) {
                        return;
                    }

                    setDisplay(next);

                    if (next !== '' && /^\d+(\.\d{1,2})?$/.test(next)) {
                        onCentsChange(displayToCents(next));
                    }
                }}
            />
            <InputGroupAddon align="inline-end">
                <InputGroupText>USD</InputGroupText>
            </InputGroupAddon>
        </InputGroup>
    );
}