metis-desk/packages/rdx-ui/src/components/form-dialog.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@repo/shadcn-ui/components/dialog";
import type { ComponentProps, ReactNode } from "react";
import { createContext, useContext } from "react";

import { useDialogHelpLayout } from "../hooks/use-dialog-help-layout";
import { DialogHelpContext, DialogHelpLabelsContext } from "../lib/dialog-help-context";
import { XIcon } from "../lib/icons";

type FormDialogLayout = "content" | "stable" | "picker";

const FormLayoutContext = createContext<FormDialogLayout>("content");

const FormCancelContext = createContext<string | undefined>(undefined);

export function FormDialog({
  open,
  onOpenChange,
  title,
  cancelLabel,
  children,
  wide = false,
  size,
  formActions = false,
  layout = "content",
  finalFocus,
  initialFocus,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: ReactNode;
  cancelLabel: string;
  children: ReactNode;
  wide?: boolean;
  size?: "small" | "medium" | "large";
  formActions?: boolean;
  layout?: FormDialogLayout;
  finalFocus?: ComponentProps<typeof DialogContent>["finalFocus"];
  initialFocus?: "title" | ComponentProps<typeof DialogContent>["initialFocus"];
}) {
  const help = useDialogHelpLayout(open, onOpenChange);
  const {
    popupRef,
    triggerRef,
    setPopupRef,
    actionsHost,
    setActionsHost,
    contentHost,
    setContentHost,
    setPresentation,
    helpOpen,
    helpMode,
    helpView,
  } = help;
  const labels = useContext(DialogHelpLabelsContext);
  const width = size ?? (wide ? "large" : "small");
  const widths = {
    small: "sm:max-w-xl",
    medium: "sm:max-w-3xl",
    large: "sm:w-[90vw] sm:max-w-[1200px]",
  };

  // La altura de los diálogos dinámicos depende de la ventana, nunca de sus resultados o pasos.
  const height = layout === "content" ? "" : "h-[calc(100dvh-2rem)] sm:h-[min(85dvh,900px)]";

  return (
    <Dialog
      onOpenChange={help.changeOpen}
      onOpenChangeComplete={help.completeOpenChange}
      open={open}
    >
      <DialogContent
        className={`flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 motion-reduce:animate-none! motion-reduce:transition-none! ${widths[width]} ${height}`}
        finalFocus={finalFocus}
        initialFocus={
          initialFocus === "title"
            ? () =>
                popupRef.current?.querySelector<HTMLElement>('[data-slot="dialog-title"]') ?? true
            : (initialFocus ??
              (layout === "picker"
                ? () =>
                    popupRef.current?.querySelector<HTMLInputElement>("input[data-quick-search]") ??
                    true
                : undefined))
        }
        ref={setPopupRef}
        showCloseButton={false}
      >
        <DialogHelpContext.Provider
          value={{
            actionsHost,
            contentHost,
            mode: helpMode,
            open: helpOpen,
            setPresentation,
            triggerRef,
          }}
        >
          <DialogHeader className="relative shrink-0 flex-row items-start justify-between gap-3 border-b px-6 py-4">
            <div className="min-w-0 flex-1 py-1">
              <DialogTitle
                className="break-words text-lg font-bold"
                tabIndex={initialFocus === "title" ? -1 : undefined}
              >
                {title}
              </DialogTitle>
            </div>
            <div className="flex shrink-0 items-center gap-1">
              <div className="flex empty:hidden" ref={setActionsHost} />
              <DialogClose
                aria-label={labels.closeDialog}
                render={<Button size="icon-sm" type="button" variant="ghost" />}
              >
                <XIcon aria-hidden="true" />
              </DialogClose>
            </div>
          </DialogHeader>
          <div
            className="relative flex min-h-0 flex-1 overflow-hidden"
            data-help-mode={helpOpen ? helpMode : undefined}
          >
            <div
              aria-hidden={helpView}
              className={`@container flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-6 pb-5 ${layout === "picker" ? "pt-3" : "pt-5"} [&:has([data-slot=form-body])]:overflow-hidden [&:has([data-slot=form-body])]:pb-0`}
              data-slot="form-dialog-content"
              inert={helpView}
              style={helpView ? { visibility: "hidden" } : undefined}
            >
              <FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
                <FormLayoutContext.Provider value={layout}>{children}</FormLayoutContext.Provider>
              </FormCancelContext.Provider>
            </div>
            <div className={help.contentHostClassName} ref={setContentHost} />
          </div>
          {!(formActions || helpView) && (
            <DialogFooter className="shrink-0 border-t px-6 py-4">
              <DialogClose render={<Button type="button" variant="outline" />}>
                {cancelLabel}
              </DialogClose>
            </DialogFooter>
          )}
        </DialogHelpContext.Provider>
      </DialogContent>
    </Dialog>
  );
}

export function FormActions({
  children,
  leadingActions,
  cancelDisabled = false,
}: {
  children: ReactNode;
  leadingActions?: ReactNode;
  cancelDisabled?: boolean;
}) {
  const cancelLabel = useContext(FormCancelContext);
  const layout = useContext(FormLayoutContext);

  return (
    <DialogFooter
      className={`shrink-0 border-t bg-popover ${layout === "picker" ? "flex-row flex-wrap gap-2 py-2 [&>button]:flex-1 sm:[&>button]:flex-none" : "py-4"}`}
    >
      {leadingActions && (
        <div className={`flex sm:mr-auto ${layout === "picker" ? "w-full sm:w-auto" : ""}`}>
          {leadingActions}
        </div>
      )}
      {cancelLabel && (
        <DialogClose render={<Button disabled={cancelDisabled} type="button" variant="outline" />}>
          {cancelLabel}
        </DialogClose>
      )}
      {children}
    </DialogFooter>
  );
}

/** El cuerpo reserva espacio simétrico para que el scroll no recorte el anillo de foco. */
export function FormBody({
  children,
  contentLayout = "stack",
}: {
  children: ReactNode;
  contentLayout?: "stack" | "fill";
}) {
  const layout = useContext(FormLayoutContext);
  const fills = layout === "picker" || contentLayout === "fill";

  return (
    <div
      className={`@container min-h-0 flex-1 px-1 ${layout === "picker" ? "flex flex-col gap-2 overflow-y-auto overscroll-contain pt-1 pb-2 [&>p]:shrink-0" : `overflow-y-auto pt-1 pb-5 ${fills ? "flex flex-col gap-5 [&>*]:shrink-0" : "space-y-5"}`} ${layout === "content" ? "" : "[scrollbar-gutter:stable]"}`}
      data-slot="form-body"
    >
      {children}
    </div>
  );
}