import React from 'react';

import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { SearchInput, type SearchInputProps } from '../../Inputs/SearchInput/SearchInput';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';
import { LabelAfter } from '../../LabelAfter/LabelAfter';

/** @inheritdoc */
export interface SearchFieldProps
  extends
    Omit<FormRowProps, 'children' | 'htmlFor' | 'isFullWidth' | 'label'>,
    Omit<SearchInputProps, 'error' | 'warning'>,
    Partial<FormRowHelperTextOwnProps> {
  /**
   * Label displayed after the input element.
   */
  labelAfter?: LabelAfterProps['label'];
  /**
   * Display loading indicator.
   */
  loading?: boolean;
}

export const SearchField: React.FC<SearchFieldProps> = React.forwardRef<HTMLInputElement, SearchFieldProps>(
  function SearchField(
    {
      label,
      tooltip,
      required,
      labelAfter,
      loading,
      error,
      warning,
      hint,
      justify,
      labelHidden,
      width,
      ...inputProps
    }: SearchFieldProps,
    ref
  ) {
    return (
      <FormRow
        label={label}
        tooltip={tooltip}
        required={required}
        justify={justify}
        labelHidden={labelHidden}
        isFullWidth={width === 'full'}
      >
        <div className='v2FormField__input'>
          <SearchInput
            loading={loading}
            ref={ref}
            required={required}
            error={!!error}
            warning={!!warning}
            width={width}
            {...inputProps}
            label={label}
          ></SearchInput>
          {labelAfter && <LabelAfter label={labelAfter} />}
          <FormRow.HelperText error={error} warning={warning} hint={hint} />
        </div>
      </FormRow>
    );
  }
);