import { Sentiment } from '../../common';
import { BackslashCircle, GiftBox } from '@transferwise/icons';
import ProcessIndicator from '../../processIndicator';
import StatusIcon from '../../statusIcon';
import { clsx } from 'clsx';
import Body from '../../body';

export type InlinePromptProps = {
  sentiment?:
    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
    | 'proposition';
  loading?: boolean;
  /**
   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
   */
  muted?: boolean;
  id?: string;
  className?: string;
  'data-testid'?: string;
  children: React.ReactNode;
  media?: React.ReactNode;
};

export const InlinePrompt = ({
  sentiment = Sentiment.POSITIVE,
  muted = false,
  loading = false,
  className,
  children,
  media = null,
  ...rest
}: InlinePromptProps) => {
  const renderMedia = () => {
    if (media && ['proposition', 'positive'].includes(sentiment)) {
      return media;
    }
    if (sentiment === 'proposition') {
      return <GiftBox />;
    }
    if (muted) {
      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
    }
    if (loading) {
      return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
    }
    return <StatusIcon size={16} sentiment={sentiment} />;
  };

  return (
    <div
      className={clsx(
        'wds-inline-prompt',
        `wds-inline-prompt--${sentiment}`,
        {
          'wds-inline-prompt--muted': muted,
          'wds-inline-prompt--loading': loading,
        },
        className,
      )}
      {...rest}
    >
      <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
      <Body>{children}</Body>
    </div>
  );
};
