import React, { useId } from 'react';

import { forwardRef } from '../../../utils/forwardRef';
import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { InputLoader } from '../../Inputs/InputLoader';
import type { MultiSelectProps } from '../../Inputs/MultiSelect/MultiSelect';
import { MultiSelect } from '../../Inputs/MultiSelect/MultiSelect';

export type { MultiSelectSelectors } from '../../Inputs/MultiSelect/hooks/useMultiSelectState';

export interface MultiSelectFieldProps<T extends object>
  extends
    Omit<FormRowProps, 'children' | 'htmlFor' | 'isFullWidth' | 'label'>,
    Partial<FormRowHelperTextOwnProps>,
    Omit<MultiSelectProps<T>, 'error' | 'warning'> {
  /**
   * Displays a loading state instead of the MultiSelect input.
   */
  loading?: boolean;
  /**
   * Addon to the right of the input.
   *
   * **INTERNAL USE ONLY:** It is unsafe to rely on this prop, as it may change or be removed in the future.
   * @internal
   */
  UNSAFE_addon?: React.ReactNode;
}

export const MultiSelectField = forwardRef(function MultiSelectField<T extends object>(
  {
    id,
    error,
    hint,
    justify,
    label,
    required,
    tooltip,
    warning,
    loading,
    labelHidden,
    UNSAFE_addon: addon,
    ...multiSelectProps
  }: MultiSelectFieldProps<T>,
  ref: React.ForwardedRef<HTMLButtonElement>
) {
  const generatedId = useId();
  id = id ?? generatedId;

  return (
    <FormRow
      label={label}
      required={required}
      tooltip={tooltip}
      justify={justify}
      htmlFor={id}
      labelHidden={labelHidden}
    >
      <div className='v2FormField__multiSelect'>
        <InputLoader loading={loading}>
          <MultiSelect ref={ref} id={id} error={!!error} warning={!!warning} label={label} {...multiSelectProps} />
        </InputLoader>
        <FormRow.HelperText error={error} warning={warning} hint={hint} />
      </div>
      {addon}
    </FormRow>
  );
});