import { MultiSelectField, MultiSelectFieldProps } from "@repo/rdx-ui/components";
import * as React from "react";
import type { FieldValues } from "react-hook-form";
import { TaxesList } from "../../constants";

/**
 * Igual que MultiSelect pero con `options` preconfiguradas a TaxesList.
 * Puedes sobreescribir `options` si lo necesitas, se mergean (TaxesList primero).
 */
export type TaxesMultiSelectFieldProps<T extends FieldValues> = Omit<
  MultiSelectFieldProps<T>,
  "options"
>;

const TaxesMultiSelectFieldInner = React.forwardRef(
  <T extends FieldValues>(
    props: TaxesMultiSelectFieldProps<T>,
    ref: React.Ref<HTMLButtonElement>
  ) => {
    return (
      <MultiSelectField ref={ref} {...(props as MultiSelectFieldProps<T>)} options={TaxesList} />
    );
  }
);

TaxesMultiSelectFieldInner.displayName = "TaxesMultiSelectField";

export const TaxesMultiSelectField = TaxesMultiSelectFieldInner as <T extends FieldValues>(
  p: TaxesMultiSelectFieldProps<T> & { ref?: React.Ref<HTMLButtonElement> }
) => React.JSX.Element;
