import { useState } from "react";
import Icon from "./Icon";

const BESTAETIGUNG = "LÖSCHEN";

/**
 * Eine unwiderrufliche Aktion im Gefahrenbereich.
 *
 * Absichtlich umständlich: Der Text nennt vorher, was genau verschwindet, und
 * ausgelöst wird erst, wenn das Wort getippt wurde. Ein Fehlklick soll hier
 * nichts anrichten können.
 */
export default function DangerAction({ title, description, impact, buttonLabel, onRun }) {
  const [wort, setWort] = useState("");
  const [busy, setBusy] = useState(false);
  const bereit = wort.trim().toUpperCase() === BESTAETIGUNG;

  async function run() {
    if (!bereit) return;
    setBusy(true);
    try {
      await onRun();
      setWort("");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="danger-action">
      <div className="strong">{title}</div>
      <p className="muted small mt-0">{description}</p>
      <p className="small mt-0"><strong>{impact}</strong></p>
      <div className="field-inline" style={{ marginBottom: 0 }}>
        <label className="grow" style={{ margin: 0 }}>
          <input value={wort} placeholder={`Zum Bestätigen ${BESTAETIGUNG} tippen`}
            onChange={(e) => setWort(e.target.value)} />
        </label>
        <button type="button" className="btn danger" disabled={!bereit || busy} onClick={run}>
          <Icon name="trash" size={16} />{busy ? "Löscht…" : buttonLabel}
        </button>
      </div>
    </div>
  );
}