import { ClockFill, CheckCircleFill } from '@transferwise/icons';
import { clsx } from 'clsx';
import { cloneElement } from 'react';
import { useIntl } from 'react-intl';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import { Typography } from '../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 '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import '../info/infoPresentations.mjs';
import Info from '../info/Info.mjs';
import StatusIcon from '../statusIcon/StatusIcon.mjs';
import messages from './Summary.messages.mjs';
import Link from '../link/Link.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
};
/**
 * @deprecated Please use `<ListItem />` instead.
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
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: [icon && /*#__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 ${icon ? '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 text-overflow-wrap 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 text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
        children: description
      }), action && /*#__PURE__*/jsx(Link, {
        href: action.href,
        target: action.target,
        className: "np-summary__action",
        "aria-label": action['aria-label'],
        onClick: action.onClick,
        children: action.text
      })]
    }), 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
