import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
import { clsx } from 'clsx';

import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
import Circle, { CircleProps } from '../common/circle';
import { useMedia } from '../common/hooks/useMedia';

export type StatusIconProps = {
  sentiment: `${Sentiment}`;
  size: SizeSmall | SizeMedium | SizeLarge;
};

const iconTypeMap = {
  positive: Check,
  neutral: Info,
  warning: Alert,
  negative: Cross,
  pending: ClockBorderless,
  info: Info,
  error: Cross,
  success: Check,
} satisfies Record<`${Sentiment}`, React.ElementType>;

const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  [String(Size.MEDIUM)]: 40,
  [String(Size.LARGE)]: 48,
} satisfies Record<string, CircleProps['size']>;

const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {
  const Icon = iconTypeMap[sentiment];
  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
  return (
    <Circle
      as="span"
      size={size}
      data-testid="status-icon"
      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
    >
      <Icon className={clsx('status-icon', iconColor)} />
    </Circle>
  );
};

export default StatusIcon;
