'use strict';

var icons = require('@transferwise/icons');
var clsx = require('clsx');
var React = require('react');
var reactIntl = require('react-intl');
var Body = require('../body/Body.js');
require('../info/infoPresentations.js');
var Info = require('../info/Info.js');
var StatusIcon = require('../statusIcon/StatusIcon.js');
var Summary_messages = require('./Summary.messages.js');
var Action = require('../common/action/Action.js');
var jsxRuntime = require('react/jsx-runtime');
var sentiment = require('../common/propsValues/sentiment.js');
var status = require('../common/propsValues/status.js');
var size = require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');

/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
const BadgeIcons = {
  [status.Status.DONE]: icons.CheckCircleFill,
  [status.Status.PENDING]: icons.ClockFill
};
const statusLabels = {
  [status.Status.NOT_DONE]: 'statusNotDone',
  [status.Status.DONE]: 'statusDone',
  [status.Status.PENDING]: 'statusPending'
};
const statusMapping = {
  [status.Status.DONE]: sentiment.Sentiment.POSITIVE,
  [status.Status.PENDING]: sentiment.Sentiment.PENDING
};
const Summary = ({
  action,
  as: Element = 'div',
  className,
  content = null,
  description = content,
  help,
  icon,
  illustration = null,
  info = help,
  status,
  title
}) => {
  const intl = reactIntl.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
    React.cloneElement(icon, {
      size: 24
    }) : icon;
  }
  // @ts-expect-error Badge can be null, this is handled in code
  const Badge = status && BadgeIcons[status];
  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
    className: clsx.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(Summary_messages[statusLabels[status]]),
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "np-summary__icon",
      children: [media, Badge && /*#__PURE__*/jsxRuntime.jsx("div", {
        children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
          size: size.Size.SMALL,
          sentiment: statusMapping[status]
        })
      })]
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "np-summary__body m-l-2",
      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "np-summary__title d-flex",
        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
          as: "span",
          role: "heading",
          "aria-level": 6,
          type: typography.Typography.BODY_LARGE_BOLD,
          className: "text-primary m-b-1",
          children: title
        }), info && /*#__PURE__*/jsxRuntime.jsx(Info, {
          "aria-label": info['aria-label'],
          className: "m-l-1 hidden-xs",
          content: info.content,
          presentation: info.presentation,
          size: size.Size.LARGE,
          title: info.title,
          onClick: info.onClick
        })]
      }), description && /*#__PURE__*/jsxRuntime.jsx(Body, {
        as: "span",
        type: typography.Typography.BODY_DEFAULT,
        className: "d-block np-summary__description",
        children: description
      }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
        action: action,
        className: "np-summary__action"
      })]
    }), info && /*#__PURE__*/jsxRuntime.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.Size.LARGE,
      title: info.title,
      onClick: info.onClick
    })]
  });
};

module.exports = Summary;
//# sourceMappingURL=Summary.js.map
