import React from 'react';

import { Field } from '@shoptet/ui-core-web';
import type { Exact } from '@shoptet/utils';

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

export interface FieldHelperTextOwnProps {
  /**
   * 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.
   */
  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.
   */
  warning?: RichText;
  /**
   * 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.
   */
  error?: RichText;
}

export interface FieldHelperTextInheritedSpanProps extends OmitPrivate<React.HTMLAttributes<HTMLSpanElement>> {}

export interface FieldHelperTextProps extends FieldHelperTextOwnProps, FieldHelperTextInheritedSpanProps {}

export const FieldHelperText: React.FC<FieldHelperTextProps> = ({ hint, error, warning, ...rest }) => {
  rest satisfies Exact<FieldHelperTextInheritedSpanProps, typeof rest>;

  if (error) {
    return (
      <Field.Error {...rest} className='v2FormField__error'>
        {error}
      </Field.Error>
    );
  }

  if (warning) {
    return (
      <Field.Description {...rest} className='v2FormField__warning'>
        {warning}
      </Field.Description>
    );
  }

  if (hint) {
    return (
      <Field.Description {...rest} className='v2FormField__hint'>
        {hint}
      </Field.Description>
    );
  }

  return null;
};