metis-desk/packages/rdx-ui/src/components/remote-option-picker.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import { Input } from "@repo/shadcn-ui/components/input";
import type { ComponentProps, ReactNode } from "react";
import { useId, useRef, useState } from "react";

import { FormActions, FormBody, FormDialog } from "./form-dialog";
import type { RemotePickerOption } from "./remote-option-list";
import { RemoteOptionList } from "./remote-option-list";

export type { RemotePickerOption } from "./remote-option-list";

/** Presenta exclusivamente la página recibida; el consumidor controla consulta, filtros y paginación remota. */
export function RemoteOptionPicker({
  title,
  items,
  initialSelection,
  pending,
  error,
  search,
  onSearch,
  onRetry,
  onSelect,
  onClose,
  pagination,
  labels,
  finalFocus,
}: {
  initialSelection?: RemotePickerOption | undefined;
  title: string;
  items: readonly RemotePickerOption[];
  pending: boolean;
  error: string | undefined;
  search: string;
  onSearch: (search: string) => void;
  onRetry: () => Promise<unknown>;
  onSelect: (option: RemotePickerOption) => void;
  onClose: () => void;
  pagination: ReactNode;
  labels: {
    search: string;
    selection: string;
    name: string;
    description: string;
    empty: string;
    loading: string;
    confirm: string;
    cancel: string;
    retry: string;
  };
  finalFocus?: ComponentProps<typeof FormDialog>["finalFocus"];
}) {
  const id = useId();
  const searchRef = useRef<HTMLInputElement>(null);
  const [selected, setSelected] = useState<RemotePickerOption | undefined>(initialSelection);
  const current = items.find((item) => item.id === selected?.id) ?? selected;
  const canConfirm = !!current && !current.disabled && !pending && !error;

  return (
    <FormDialog
      cancelLabel={labels.cancel}
      finalFocus={finalFocus}
      formActions
      layout="picker"
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      size="medium"
      title={title}
    >
      <FormBody contentLayout="fill">
        <label className="sr-only" htmlFor={id}>
          {labels.search}
        </label>
        <Input
          data-quick-search=""
          id={id}
          maxLength={100}
          onChange={(event) => onSearch(event.target.value)}
          placeholder={labels.search}
          ref={searchRef}
          value={search}
        />
        {pending && <p role="status">{labels.loading}</p>}
        {error && (
          <div role="alert">
            <p>{error}</p>
            <Button
              onClick={async () => {
                searchRef.current?.focus({ preventScroll: true });
                await onRetry();
              }}
              variant="outline"
            >
              {labels.retry}
            </Button>
          </div>
        )}
        <RemoteOptionList
          error={error}
          items={items}
          labels={labels}
          onSelect={setSelected}
          pending={pending}
          title={title}
          value={selected?.id ?? ""}
        />
        {pagination}
      </FormBody>
      <FormActions>
        <Button
          disabled={!canConfirm}
          onClick={() => {
            if (canConfirm && current) {
              onSelect(current);
              onClose();
            }
          }}
        >
          {labels.confirm}
        </Button>
      </FormActions>
    </FormDialog>
  );
}