import OmsorgButton from "../../components/ui/OmsorgButton";

export const emptyFacilityContactForm = {
  name: "",
  role: "",
  department: "",
  phoneNumber: "",
  email: "",
  notes: "",
};

export function facilityContactToFormValues(contact) {
  return {
    name: contact.name ?? "",
    role: contact.role ?? "",
    department: contact.department ?? "",
    phoneNumber: contact.phoneNumber ?? "",
    email: contact.email ?? "",
    notes: contact.notes ?? "",
  };
}

export function facilityContactFormToPayload(form) {
  return {
    name: form.name.trim(),
    role: form.role.trim() || null,
    department: form.department.trim() || null,
    phoneNumber: form.phoneNumber.trim() || null,
    email: form.email.trim() || null,
    notes: form.notes.trim() || null,
  };
}

export default function FacilityContactForm({ form, onChange }) {
  function updateField(field) {
    return (event) => onChange({ ...form, [field]: event.target.value });
  }

  return (
    <div className="form-grid">
      <label className="form-field">
        <span>Name *</span>
        <input value={form.name} onChange={updateField("name")} required />
      </label>

      <label className="form-field">
        <span>Funktion</span>
        <input value={form.role} onChange={updateField("role")} />
      </label>

      <label className="form-field">
        <span>Abteilung</span>
        <input value={form.department} onChange={updateField("department")} />
      </label>

      <label className="form-field">
        <span>Telefon</span>
        <input value={form.phoneNumber} onChange={updateField("phoneNumber")} />
      </label>

      <label className="form-field">
        <span>E-Mail</span>
        <input type="email" value={form.email} onChange={updateField("email")} />
      </label>

      <label className="form-field">
        <span>Notizen</span>
        <input value={form.notes} onChange={updateField("notes")} />
      </label>
    </div>
  );
}

export function FormActions({ onCancel, isSaving, submitLabel }) {
  return (
    <div className="form-actions">
      <OmsorgButton variant="secondary" type="button" onClick={onCancel} disabled={isSaving}>
        Abbrechen
      </OmsorgButton>
      <OmsorgButton type="submit" disabled={isSaving}>
        {isSaving ? "Speichert..." : submitLabel}
      </OmsorgButton>
    </div>
  );
}
