import { clsx } from 'clsx';
import { ReactNode } from 'react';

import { Sentiment, Size } from '../common';
import StatusIcon from '../statusIcon';
import Body from '../body';

export interface InlineAlertProps {
  id?: string;
  type?: `${Sentiment}`;
  className?: string;
  children: ReactNode;
}

const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
  Sentiment.NEGATIVE,
  Sentiment.ERROR,
  Sentiment.POSITIVE,
  Sentiment.SUCCESS,
  Sentiment.WARNING,
]);

/**
 * Avoid using `<InlineAlert>` component directly
 * it's for edge cases when `<Field />` isn't suitable for some reasons.
 *
 * Example:
 * ```
 * <Field sentiment={..} message={..}>..</Field>
 * ```
 */
export default function InlineAlert({
  id,
  type = 'neutral',
  className,
  children,
}: InlineAlertProps) {
  return (
    <Body
      role="alert"
      id={id}
      className={clsx(
        'alert alert-detach',
        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
        'd-flex',
        className,
      )}
    >
      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
      <div>{children}</div>
    </Body>
  );
}
