import OmsorgButton from "../../components/ui/OmsorgButton";
import { useValueListItems } from "../../app/useValueListItems";

export const emptyFacilityQualificationRateForm = {
  qualification: "",
  rate: "",
};

export function facilityQualificationRateToFormValues(rate) {
  return {
    qualification: rate.qualification ?? "",
    rate: typeof rate.rate === "number" ? String(rate.rate) : "",
  };
}

export function facilityQualificationRateFormToPayload(form) {
  return {
    qualification: form.qualification,
    rate: Number(form.rate) || 0,
  };
}

export default function FacilityQualificationRateForm({ form, onChange }) {
  const { items: qualificationOptions } = useValueListItems("Qualification");

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

  return (
    <div className="form-grid">
      <label className="form-field">
        <span>Qualifikation *</span>
        <select value={form.qualification} onChange={updateField("qualification")} required>
          <option value="">— auswählen —</option>
          {qualificationOptions.map((option) => (
            <option key={option.id} value={option.value}>
              {option.value}
            </option>
          ))}
        </select>
      </label>

      <label className="form-field">
        <span>Verrechnungssatz (EUR/Std.) *</span>
        <input type="number" step="0.01" min="0" value={form.rate} onChange={updateField("rate")} required />
      </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>
  );
}
