import { Check, Info, Cross, ClockBorderless, Alert } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import SentimentSurface from '../sentimentSurface/SentimentSurface.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import { Status } from '../common/propsValues/status.mjs';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import 'react';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx } from 'react/jsx-runtime';
import Circle from '../common/circle/Circle.mjs';
import { useMedia } from '../common/hooks/useMedia.mjs';
import messages from './StatusIcon.messages.mjs';

const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  [String(Size.MEDIUM)]: 40,
  [String(Size.LARGE)]: 48
};
const StatusIcon = ({
  sentiment = 'neutral',
  size: sizeProp = 40,
  iconLabel
}) => {
  const intl = useIntl();
  const iconMetaBySentiment = {
    [Sentiment.NEGATIVE]: {
      Icon: Cross,
      defaultIconLabel: intl.formatMessage(messages.errorLabel)
    },
    [Sentiment.POSITIVE]: {
      Icon: Check,
      defaultIconLabel: intl.formatMessage(messages.successLabel)
    },
    [Sentiment.WARNING]: {
      Icon: Alert,
      defaultIconLabel: intl.formatMessage(messages.warningLabel)
    },
    [Status.PENDING]: {
      Icon: ClockBorderless,
      defaultIconLabel: intl.formatMessage(messages.pendingLabel)
    },
    [Sentiment.NEUTRAL]: {
      Icon: Info,
      defaultIconLabel: intl.formatMessage(messages.informationLabel)
    },
    // deprecated
    [Sentiment.ERROR]: {
      Icon: Cross,
      defaultIconLabel: intl.formatMessage(messages.errorLabel)
    },
    [Sentiment.INFO]: {
      Icon: Info,
      defaultIconLabel: intl.formatMessage(messages.informationLabel)
    },
    [Sentiment.SUCCESS]: {
      Icon: Check,
      defaultIconLabel: intl.formatMessage(messages.successLabel)
    }
  };
  const {
    Icon,
    defaultIconLabel
  } = iconMetaBySentiment[sentiment];
  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
  const size = mapLegacySize[sizeProp] ?? sizeProp;
  // eslint-disable-next-line react/no-unstable-nested-components
  const SentimentSurfaceSetting = props => /*#__PURE__*/jsx(SentimentSurface, {
    as: "span"
    // @ts-expect-error sentiment and SentimentSurface types mismatch
    ,
    sentiment: sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment,
    ...props
  });
  return /*#__PURE__*/jsx(Circle, {
    as: SentimentSurfaceSetting,
    size: isTinyViewport && size < 40 ? 32 : size,
    "data-testid": "status-icon",
    className: clsx('status-circle', sentiment),
    children: /*#__PURE__*/jsx(Icon, {
      className: clsx('status-icon', iconColor),
      title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
    })
  });
};

export { StatusIcon as default };
//# sourceMappingURL=StatusIcon.mjs.map
