import { useEffect, useState } from "react";

// Kleines, editierbares Textfeld. Speichert beim Verlassen und bei Enter, aber
// nur wenn sich etwas geändert hat – wie EditableAmount daneben, nur ohne die
// Betragsrechnerei. Escape nimmt die Änderung zurück.
export default function EditableText({ value, onSave, placeholder, maxLength }) {
  const [val, setVal] = useState(value || "");
  // Von aussen neu geladen (etwa nach dem Speichern): Stand übernehmen.
  useEffect(() => { setVal(value || ""); }, [value]);

  function commit() {
    const neu = val.trim();
    if (neu !== (value || "")) onSave(neu);
  }

  return (
    <input
      type="text"
      value={val}
      placeholder={placeholder}
      maxLength={maxLength}
      // Der ganze Text als Tooltip: Die Spalte ist schmal, die Notiz darf lang sein.
      title={val || undefined}
      onChange={(e) => setVal(e.target.value)}
      onBlur={commit}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          e.preventDefault();
          commit();
          e.target.blur();
        }
        if (e.key === "Escape") {
          setVal(value || "");
          e.target.blur();
        }
      }}
    />
  );
}