import { useState } from "react";

import { apiRequest } from "../../api/client";
import type { Standort } from "../../api/types";

interface Props {
  standorte: Standort[];
  onGeaendert: () => Promise<void>;
  onFehler: (text: string) => void;
}

export function StandortSection({ standorte, onGeaendert, onFehler }: Props) {
  const [name, setName] = useState("");
  const [wirdAngelegt, setWirdAngelegt] = useState(false);

  async function anlegen() {
    setWirdAngelegt(true);
    try {
      await apiRequest("/standorte", { method: "POST", body: { name } });
      setName("");
      await onGeaendert();
    } catch {
      onFehler("Standort konnte nicht angelegt werden.");
    } finally {
      setWirdAngelegt(false);
    }
  }

  return (
    <section className="section">
      <h2>Standort anlegen</h2>
      <div className="card">
        <div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
          <input
            className="input"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name des Standorts"
          />
          <button className="btn btn-primary" onClick={anlegen} disabled={!name || wirdAngelegt}>
            Anlegen
          </button>
        </div>
        {standorte.length > 0 && (
          <ul className="card-list">
            {standorte.map((s) => (
              <li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
                <span>{s.name}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}