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

export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
  /**
   * The sentiment determines the colour scheme.
   * @default success
   */
  sentiment?: Sentiment;
  /**
   * The emphasis level affecting background and text contrast.
   * @default 'base'
   */
  emphasis?: Emphasis;
  /**
   * 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-x. */
export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
  (
    {
      sentiment = 'success',
      emphasis = 'base',
      media,
      actions,
      onDismiss,
      className,
      children,
      ...restProps
    },
    ref,
  ) => {
    const intl = useIntl();

    return (
      <SentimentSurface
        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
        ref={ref}
        sentiment={sentiment}
        emphasis={emphasis}
        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>
    );
  },
);

PrimitivePrompt.displayName = 'PrimitivePrompt';
