import { Cross, CrossCircleFill } from '@transferwise/icons';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { useIntl } from 'react-intl';

import { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';

import messages from './CloseButton.messages';

export type CloseButtonProps = Pick<
  React.ComponentPropsWithoutRef<'button'>,
  'aria-label' | 'className' | 'onClick'
> & {
  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;
  filled?: boolean;
  isDisabled?: boolean;
  testId?: string;
  tabIndex?: number;
};

/**
 * @deprecated Use `<IconButton />` component instead
 */
export const CloseButton = forwardRef(function CloseButton(
  {
    'aria-label': ariaLabel,
    size = Size.MEDIUM,
    filled = false,
    className,
    onClick,
    isDisabled,
    testId,
    tabIndex,
  }: CloseButtonProps,
  reference: React.ForwardedRef<HTMLButtonElement | null>,
) {
  const intl = useIntl();
  ariaLabel ??= intl.formatMessage(messages.ariaLabel);
  const Icon = filled ? CrossCircleFill : Cross;

  return (
    <button
      ref={reference}
      type="button"
      className={clsx(
        'np-close-button',
        'close btn-link',
        'text-no-decoration',
        {
          'np-close-button--x-small': size === Size.EXTRA_SMALL,
          'np-close-button--large': size === Size.MEDIUM,
          'np-close-button--x-large': size === Size.LARGE,
        },
        className,
      )}
      aria-label={ariaLabel}
      aria-disabled={isDisabled}
      disabled={isDisabled}
      data-testid={testId}
      tabIndex={tabIndex}
      onClick={onClick}
    >
      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />
    </button>
  );
});