import type { ReactNode } from 'react';
import React from 'react';

import type { RichText } from '../../types';

export interface FormRowHelperTextOwnProps {
  /**
   * Helper text instructing user on how to fill out the field. Using hint over placeholder text is preferred.
   * See error and warning for more critical instructions.
   * Pass undefined to explicitly omit this prop.
   */
  hint?: RichText;
  /**
   * Helper text instructing user on how to fill out the field that are not critical to resolve to continue.
   * See error for more critical instructions, and hint for less critical instructions.
   * Pass undefined to explicitly omit this prop.
   */
  warning: ReactNode;
  /**
   * Helper text instructing user on how to fill out the field that are critical and should be resolved to continue.
   * See warning or hint for less critical instructions.
   * Pass undefined to explicitly omit this prop.
   */
  error: ReactNode;
}

export interface FormRowHelperTextProps extends FormRowHelperTextOwnProps, React.HTMLAttributes<HTMLSpanElement> {}

/** @deprecated */
export const FormRowHelperText: React.FC<FormRowHelperTextProps> = ({ hint, error, warning, ...rest }) => {
  if (error) {
    return (
      error !== true && (
        <span {...rest} className='v2FormField__error'>
          {error}
        </span>
      )
    );
  }

  if (warning) {
    return (
      warning !== true && (
        <span {...rest} className='v2FormField__warning'>
          {warning}
        </span>
      )
    );
  }

  if (hint) {
    return (
      hint !== true && (
        <span {...rest} className='v2FormField__hint'>
          {hint}
        </span>
      )
    );
  }

  return null;
};