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

import { Button } from "@repo/shadcn-ui/components/button";
import { useState } from "react";

import { FormActions, FormBody, FormDialog } from "./form-dialog";
import { OptionPickerList } from "./option-picker-list";

export type PickerOption = {
  id: string;
  label: string;
  description: string;
  disabled?: boolean;
};

/** Selección única provisional: buscar y cancelar nunca modifican el formulario padre. */
export function OptionPickerDialog({
  title,
  options,
  value,
  onSelect,
  onClose,
  labels,
  locale,
  loading = false,
}: {
  title: string;
  options: readonly PickerOption[];
  value: string;
  onSelect: (id: string) => void;
  onClose: () => void;
  labels: {
    selection: string;
    name: string;
    entity: (count: number) => string;
    description: string;
    confirm: string;
    cancel: string;
    search: string;
  };
  locale: string;
  loading?: boolean;
}) {
  const [selected, setSelected] = useState(value);
  const available =
    !loading && options.some((option) => option.id === selected && !option.disabled);

  return (
    <FormDialog
      cancelLabel={labels.cancel}
      formActions
      layout="picker"
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      size="medium"
      title={title}
    >
      <FormBody>
        <OptionPickerList
          labels={labels}
          loading={loading}
          locale={locale}
          onChange={setSelected}
          options={options}
          title={title}
          value={selected}
        />
      </FormBody>
      <FormActions>
        <Button
          disabled={!available}
          onClick={() => {
            if (available) {
              onSelect(selected);
              onClose();
            }
          }}
          type="button"
        >
          {labels.confirm}
        </Button>
      </FormActions>
    </FormDialog>
  );
}