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';
import SentimentSurface from '../../sentimentSurface';

export type InlinePromptProps = {
  /**
   * The sentiment determines the colour scheme
   */
  sentiment?:
    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
    | 'proposition';
  /**
   * Replaces the icon with a spinner while waiting for the short-lived action to finish.
   * @default false
   */
  loading?: boolean;
  /**
   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled
   * they are associated with actually disabled component (e.g. a disabled list item or input).
   * @default false
   */
  muted?: boolean;
  /**
   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
   */
  media?: React.ReactNode;
  /**
   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
   * To be used primarily for `proposition` sentiment.
   */
  iconLabel?: string;
  id?: string;
  className?: string;
  'data-testid'?: string;
  children: React.ReactNode;
};

/**
 * Inline prompts appear alongside a specific component on the screen. They help the user stay
 * informed, fix something, or get more out of what they're doing. <br />
 *
 * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
 */
export const InlinePrompt = ({
  sentiment = Sentiment.POSITIVE,
  muted = false,
  loading = false,
  className,
  children,
  media = null,
  iconLabel,
  'data-testid': dataTestId,
  ...rest
}: InlinePromptProps) => {
  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;

  const renderMedia = () => {
    if (muted) {
      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={iconLabel} />;
    }
    if (loading) {
      return (
        <ProcessIndicator
          data-testid="InlinePrompt_ProcessIndicator"
          size="xxs"
          className="wds-inline-prompt-process-indicator"
        />
      );
    }

    if (sentiment === 'positive' && media) {
      return media;
    }

    if (sentiment === 'proposition') {
      return media || <GiftBox title={iconLabel} />;
    }

    return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;
  };

  return (
    <SentimentSurface
      sentiment={surfaceSentiment}
      data-testid={dataTestId}
      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>
    </SentimentSurface>
  );
};
