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

export const emptyAbsenceForm = {
  type: "",
  startDate: "",
  endDate: "",
  reason: "",
  substitute: "",
  note: "",
};

function toDateInputValue(value) {
  if (!value) {
    return "";
  }
  const date = value instanceof Date ? value : new Date(value);
  return Number.isNaN(date.getTime()) ? "" : date.toISOString().slice(0, 10);
}

export function absenceToFormValues(absence) {
  return {
    type: absence.type ?? "",
    startDate: toDateInputValue(absence.startDate),
    endDate: toDateInputValue(absence.endDate),
    reason: absence.reason ?? "",
    substitute: absence.substitute ?? "",
    note: absence.note ?? "",
  };
}

export function absenceFormToPayload(form) {
  return {
    type: form.type,
    startDate: form.startDate,
    endDate: form.endDate,
    reason: form.reason.trim() || null,
    substitute: form.substitute.trim() || null,
    note: form.note.trim() || null,
  };
}

export default function AbsenceForm({ form, onChange }) {
  const { items: typeItems } = useValueListItems("AbsenceType");

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

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

      <div className="form-row">
        <label className="form-field">
          <span>Beginn *</span>
          <input type="date" value={form.startDate} onChange={updateField("startDate")} required />
        </label>

        <label className="form-field">
          <span>Ende *</span>
          <input type="date" value={form.endDate} onChange={updateField("endDate")} required />
        </label>
      </div>

      <label className="form-field">
        <span>Grund (optional)</span>
        <input type="text" value={form.reason} onChange={updateField("reason")} maxLength={500} />
      </label>

      <label className="form-field">
        <span>Vertretung (optional)</span>
        <input type="text" value={form.substitute} onChange={updateField("substitute")} maxLength={200} />
      </label>

      <label className="form-field">
        <span>Nachricht (optional)</span>
        <textarea value={form.note} onChange={updateField("note")} maxLength={500} />
      </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>
  );
}
