import { useEffect, useState } from "react";
import { centsToInput, parseAmountToCents } from "../format";

// Kleines, editierbares Betragsfeld (Cent). Speichert bei Verlassen/Enter,
// aber nur bei Änderung.
export default function EditableAmount({ cents, onSave, placeholder = "0,00" }) {
  const [val, setVal] = useState(centsToInput(cents));
  useEffect(() => { setVal(centsToInput(cents)); }, [cents]);

  function commit() {
    const c = parseAmountToCents(val) ?? 0;
    if (c !== cents) onSave(c);
  }

  return (
    <input
      className="amount-input"
      inputMode="decimal"
      value={val}
      placeholder={placeholder}
      onChange={(e) => setVal(e.target.value)}
      onBlur={commit}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          e.preventDefault();
          commit();
          e.target.blur();
        }
      }}
    />
  );
}