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 { PrimitivePrompt } from '../PrimitivePrompt';

export type InlinePromptProps = {
  /**
   * The sentiment determines the colour scheme
   * @default Sentiment.POSITIVE
   */
  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 all sentiments. If the sentiment uses StatusIcon by default, it will be
   * replaced by a plain icon.
   */
  media?: React.ReactNode;
  /**
   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
   */
  mediaLabel?: string;
  /**
   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.
   * @default auto
   */
  width?: 'auto' | 'full';
  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,
  mediaLabel,
  width = 'auto',
  'data-testid': dataTestId,
  ...restProps
}: InlinePromptProps) => {
  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;

  const renderMedia = () => {
    if (muted) {
      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
    }

    if (loading) {
      return (
        <ProcessIndicator
          data-testid="InlinePrompt_ProcessIndicator"
          size="xxs"
          className="wds-inline-prompt-process-indicator"
        />
      );
    }

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

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

  return (
    <PrimitivePrompt
      sentiment={surfaceSentiment}
      media={renderMedia()}
      data-testid={dataTestId}
      className={clsx(
        'wds-inline-prompt',
        {
          'wds-inline-prompt--auto-width': width !== 'full',
          'wds-inline-prompt--muted': muted,
          'wds-inline-prompt--loading': loading,
        },
        className,
      )}
      {...restProps}
    >
      <Body>{children}</Body>
    </PrimitivePrompt>
  );
};
