trackgo-fe/packages/ui/src/components/Form/fields/async-select.field.tsx

import React from 'react';
import {
  useController,
  type FieldPath,
  type FieldValues,
  type UseControllerProps,
} from 'react-hook-form';
import type { SelectProps, MultiSelectProps } from '@mantine/core';
import { AsyncSelect } from '../custom/selects/AsyncSelect';
import type { AsyncSelectBaseProps, LoadOptionsFn } from '../custom/selects/types';
import { useTranslatedError } from '../useTranslatedError';

// ---------------------------------------------------------------------------
// FieldAsyncSelect — RHF-connected Async Select
// ---------------------------------------------------------------------------
//
// Thin RHF wrapper around the standalone AsyncSelect engine.
// Adds useController binding + i18n error translation.
//
// Data Mapping Contract:
//   Single: RHF stores T | null → maps to Mantine string | null
//   Multi:  RHF stores T[]     → maps to Mantine string[]
//
// Inversion of Control: accepts `loadOptions` callback instead of
// hardcoded API endpoint. The component is transport-agnostic.
// ---------------------------------------------------------------------------

/** Mantine props we manage ourselves */
type ManagedSelectProps = 'data' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'error' | 'filter' | 'name' | 'onSelect';
type ManagedMultiSelectProps = 'data' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'error' | 'filter' | 'name' | 'onSelect';

/** Async-specific props (IoC pattern) */
interface AsyncExtraProps<T> {
  /** Async callback to load options — (search, page, prevOptions) => Promise */
  loadOptions: LoadOptionsFn<T>;

  /** Pre-loaded objects for edit forms (injected into dropdown regardless of fetch state) */
  defaultOptions?: T[];

  /** Search debounce delay in ms (default: 300) */
  debounceMs?: number;
}

/** Single-select async RHF props */
export type FieldAsyncSelectSingleProps<
  T extends Record<string, any>,
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = AsyncSelectBaseProps<T> &
  AsyncExtraProps<T> &
  UseControllerProps<TFieldValues, TName> &
  Omit<SelectProps, ManagedSelectProps> & {
    multiple?: false;
  };

/** Multi-select async RHF props */
export type FieldAsyncSelectMultiProps<
  T extends Record<string, any>,
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = AsyncSelectBaseProps<T> &
  AsyncExtraProps<T> &
  UseControllerProps<TFieldValues, TName> &
  Omit<MultiSelectProps, ManagedMultiSelectProps> & {
    multiple: true;
  };

export type FieldAsyncSelectProps<
  T extends Record<string, any>,
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> =
  | FieldAsyncSelectSingleProps<T, TFieldValues, TName>
  | FieldAsyncSelectMultiProps<T, TFieldValues, TName>;

// ---------------------------------------------------------------------------
// Component Implementation
// ---------------------------------------------------------------------------

function FieldAsyncSelectInner<
  T extends Record<string, any>,
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>(props: FieldAsyncSelectProps<T, TFieldValues, TName>) {
  const {
    // RHF controller props
    name,
    control,
    rules,
    shouldUnregister,
    defaultValue,
    disabled,
    // Object/Async engine props
    valueKey,
    labelKey,
    renderLabel,
    multiple,
    filterOption,
    onSelect: onSelectCallback,
    loadOptions,
    defaultOptions,
    debounceMs,
    // Remaining Mantine props
    ...mantineProps
  } = props;

  const {
    field,
    fieldState: { error },
  } = useController<TFieldValues, TName>({
    name,
    control,
    rules,
    shouldUnregister,
    defaultValue,
    disabled,
  });

  const translatedError = useTranslatedError(error?.message);

  const handleChange = (value: any) => {
    field.onChange(value);
    onSelectCallback?.(value);
  };

  const engineProps = {
    valueKey,
    labelKey,
    renderLabel,
    filterOption,
    loadOptions,
    defaultOptions,
    debounceMs,
    onBlur: field.onBlur,
    error: translatedError,
    disabled: field.disabled,
  };

  if (multiple) {
    return (
      <AsyncSelect<T>
        multiple
        {...engineProps}
        value={field.value ?? []}
        onChange={handleChange}
        {...(mantineProps as any)}
      />
    );
  }

  return (
    <AsyncSelect<T>
      {...engineProps}
      value={field.value ?? null}
      onChange={handleChange}
      {...(mantineProps as any)}
    />
  );
}

export const FieldAsyncSelect = React.memo(FieldAsyncSelectInner) as typeof FieldAsyncSelectInner;
(FieldAsyncSelect as any).displayName = 'FieldAsyncSelect';