leistungsbilanz-ts/src/frontend/components/form-modal.tsx

"use client";

import React, { type FormEvent, type ReactNode, useEffect, useRef } from "react";

interface FormModalProps {
  children: ReactNode;
  description?: string;
  dialogSize?: "large" | "viewport";
  isSaving: boolean;
  onClose: () => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  submitDisabled?: boolean;
  submitLabel: string;
  title: string;
}

const FOCUSABLE_SELECTOR =
  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';

export function FormModal({
  children,
  description,
  dialogSize = "large",
  isSaving,
  onClose,
  onSubmit,
  submitDisabled,
  submitLabel,
  title,
}: FormModalProps) {
  const dialogRef = useRef<HTMLDivElement>(null);

  // Focuses the dialog on open and returns focus to the element that
  // triggered it on close, so keyboard users never lose their place in the
  // grid behind the backdrop.
  useEffect(() => {
    const previouslyFocused = document.activeElement as HTMLElement | null;
    const firstFocusable =
      dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
    firstFocusable?.focus();
    return () => {
      previouslyFocused?.focus();
    };
  }, []);

  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (event.key === "Escape") {
      if (!isSaving) {
        event.stopPropagation();
        onClose();
      }
      return;
    }
    if (event.key !== "Tab" || !dialogRef.current) {
      return;
    }
    const focusable = Array.from(
      dialogRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
    );
    if (focusable.length === 0) {
      return;
    }
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  }

  return (
    <>
      <div
        aria-modal="true"
        className="modal fade show d-block"
        onKeyDown={handleKeyDown}
        ref={dialogRef}
        role="dialog"
        tabIndex={-1}
      >
        <div
          className={`modal-dialog modal-dialog-centered ${dialogSize === "large" ? "modal-lg" : ""}`}
          style={dialogSize === "viewport" ? { maxWidth: "calc(100vw - 2rem)" } : undefined}
        >
          <form className="modal-content" onSubmit={onSubmit}>
            <div className="modal-header">
              <div>
                <h2 className="modal-title fs-5">{title}</h2>
                {description ? (
                  <p className="text-secondary small mb-0">{description}</p>
                ) : null}
              </div>
              <button
                aria-label="Schließen"
                className="btn-close"
                disabled={isSaving}
                onClick={onClose}
                type="button"
              />
            </div>
            <div className="modal-body">{children}</div>
            <div className="modal-footer">
              <button
                className="btn btn-outline-secondary"
                disabled={isSaving}
                onClick={onClose}
                type="button"
              >
                Abbrechen
              </button>
              <button
                className="btn btn-primary"
                disabled={isSaving || submitDisabled}
                type="submit"
              >
                {isSaving ? "Wird gespeichert …" : submitLabel}
              </button>
            </div>
          </form>
        </div>
      </div>
      <div className="modal-backdrop fade show" />
    </>
  );
}