import { CheckCircleFill, ClockFill } from '@transferwise/icons';
import { clsx } from 'clsx';
import { cloneElement } from 'react';
import { useIntl } from 'react-intl';
import Body from '../body/Body.mjs';
import '../info/infoPresentations.mjs';
import Info from '../info/Info.mjs';
import StatusIcon from '../statusIcon/StatusIcon.mjs';
import messages from './Summary.messages.mjs';
import { Action } from '../common/action/Action.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import { Status } from '../common/propsValues/status.mjs';
import { Size } from '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';

/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
const BadgeIcons = {
  [Status.DONE]: CheckCircleFill,
  [Status.PENDING]: ClockFill
};
const statusLabels = {
  [Status.NOT_DONE]: 'statusNotDone',
  [Status.DONE]: 'statusDone',
  [Status.PENDING]: 'statusPending'
};
const statusMapping = {
  [Status.DONE]: Sentiment.POSITIVE,
  [Status.PENDING]: Sentiment.PENDING
};
const Summary = ({
  action,
  as: Element = 'div',
  className,
  content = null,
  description = content,
  help,
  icon,
  illustration = null,
  info = help,
  status,
  title
}) => {
  const intl = useIntl();
  let media = illustration;
  if (icon) {
    // @ts-expect-error if icon is present it has props and size prop
    const iconSize = icon?.props?.size;
    media = iconSize !== 24 ?
    /*#__PURE__*/
    // @ts-expect-error we need icon to adjust it's size
    cloneElement(icon, {
      size: 24
    }) : icon;
  }
  // @ts-expect-error Badge can be null, this is handled in code
  const Badge = status && BadgeIcons[status];
  return /*#__PURE__*/jsxs(Element, {
    className: clsx('np-summary d-flex align-items-start', className)
    // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
    ,
    "aria-label": status && intl.formatMessage(messages[statusLabels[status]]),
    children: [/*#__PURE__*/jsxs("div", {
      className: "np-summary__icon",
      children: [media, Badge && /*#__PURE__*/jsx("div", {
        children: /*#__PURE__*/jsx(StatusIcon, {
          size: Size.SMALL,
          sentiment: statusMapping[status]
        })
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "np-summary__body m-l-2",
      children: [/*#__PURE__*/jsxs("div", {
        className: "np-summary__title d-flex",
        children: [/*#__PURE__*/jsx(Body, {
          as: "span",
          role: "heading",
          "aria-level": 6,
          type: Typography.BODY_LARGE_BOLD,
          className: "text-primary m-b-1",
          children: title
        }), info && /*#__PURE__*/jsx(Info, {
          "aria-label": info['aria-label'],
          className: "m-l-1 hidden-xs",
          content: info.content,
          presentation: info.presentation,
          size: Size.LARGE,
          title: info.title,
          onClick: info.onClick
        })]
      }), description && /*#__PURE__*/jsx(Body, {
        as: "span",
        type: Typography.BODY_DEFAULT,
        className: "d-block np-summary__description",
        children: description
      }), action && /*#__PURE__*/jsx(Action, {
        action: action,
        className: "np-summary__action"
      })]
    }), info && /*#__PURE__*/jsx(Info, {
      "aria-label": info['aria-label'],
      className: "m-l-2 hidden-sm hidden-md hidden-lg hidden-xl",
      content: info.content,
      presentation: info.presentation,
      size: Size.LARGE,
      title: info.title,
      onClick: info.onClick
    })]
  });
};

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