import { anmelden } from '../api';
import { knopf, feld, fehlerzeile } from '../util';

export function anmeldung(fertig: () => void): HTMLElement {
  const karte = document.createElement('div');
  karte.className = 'login-card';

  const titel = document.createElement('h1');
  titel.textContent = 'Flaro';

  const name = feld('Benutzername');
  name.autocomplete = 'username';
  const passwort = feld('Passwort', 'password');
  passwort.autocomplete = 'current-password';

  // **Vorgabe ist „bleiben".** Am eigenen Rechner will sich niemand täglich
  // neu anmelden; wer an einem fremden sitzt, schaltet es ab. Ohne Haken
  // verfällt die Anmeldung mit dem Browserfenster.
  const bleiben = document.createElement('label');
  bleiben.className = 'bleiben';
  const haken = document.createElement('input');
  haken.type = 'checkbox';
  haken.checked = true;
  bleiben.append(haken, document.createTextNode(' Angemeldet bleiben'));

  const los = knopf('Anmelden', 'btn btn-primary');

  karte.append(titel, name, passwort, bleiben, los);

  async function absenden(): Promise<void> {
    karte.querySelector('.fehler')?.remove();
    los.disabled = true;
    try {
      await anmelden(name.value.trim(), passwort.value, haken.checked);
      fertig();
    } catch (fehler) {
      karte.appendChild(fehlerzeile((fehler as Error).message));
      los.disabled = false;
      passwort.select();
    }
  }

  los.onclick = () => void absenden();
  name.onkeydown = e => { if (e.key === 'Enter') passwort.focus(); };
  passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
  setTimeout(() => name.focus(), 50);
  return karte;
}