import { Cross } from '@transferwise/icons';
import { clsx } from 'clsx';
import SentimentSurface, { Sentiment } from '../../sentimentSurface';
import IconButton from '../../iconButton';
import { useIntl } from 'react-intl';
import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
import { HTMLAttributes, ReactNode } from 'react';

export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
  /**
   * The sentiment determines the colour scheme
   * @default success
   */
  sentiment?: Sentiment;
  /**
   * Media to be displayed on the prompt (icon/image/etc).
   */
  media: ReactNode;
  /**
   * Any actions to be displayed on the prompt.
   */
  actions?: ReactNode;
  /**
   * Handler called when the close button is clicked. If not provided, then the close button is hidden.
   */
  onDismiss?: () => void;
  /**
   * Test ID for testing tools
   */
  'data-testid'?: string;
};

/**
 * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
 * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
export const PrimitivePrompt = ({
  sentiment = 'success',
  media,
  actions,
  onDismiss,
  className,
  children,
  ...restProps
}: PrimitivePromptProps) => {
  const intl = useIntl();

  return (
    <SentimentSurface
      sentiment={sentiment}
      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
      {...restProps}
    >
      <div
        className={clsx('wds-prompt__content-wrapper', {
          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
        })}
      >
        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
        {children}
        {onDismiss && (
          <IconButton
            size={24}
            priority="secondary"
            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
            onClick={onDismiss}
          >
            <Cross />
          </IconButton>
        )}
        {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
      </div>
    </SentimentSurface>
  );
};