'use strict';

var React = require('react');
var clsx = require('clsx');
var Body = require('../../body/Body.js');
var Button_resolver = require('../../button/Button.resolver.js');
var Container = require('../../container/Container.js');
require('../../common/theme.js');
require('../../common/direction.js');
var neptuneTokens = require('@transferwise/neptune-tokens');
require('../../common/propsValues/control.js');
require('../../common/propsValues/size.js');
var typography = require('../../common/propsValues/typography.js');
require('../../common/propsValues/width.js');
require('../../common/propsValues/type.js');
require('../../common/propsValues/dateMode.js');
require('../../common/propsValues/monthFormat.js');
require('../../common/propsValues/position.js');
require('../../common/propsValues/layouts.js');
require('../../common/propsValues/status.js');
require('../../common/propsValues/sentiment.js');
require('../../common/propsValues/profileType.js');
require('../../common/propsValues/variant.js');
require('../../common/propsValues/scroll.js');
require('../../common/propsValues/markdownNodeType.js');
require('../../common/fileType.js');
require('@transferwise/formatting');
require('@transferwise/icons');
require('react-intl');
require('../../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
var promptMedia = require('../helpers/promptMedia.js');
var Expander = require('../common/Expander/Expander.js');
var helpers = require('./helpers.js');
var useContainerSize = require('../../common/hooks/useContainerSize.js');

const CriticalBanner = ({
  sentiment = 'negative',
  title,
  description,
  media = {},
  action,
  actionSecondary,
  expanded: expandedProp,
  onToggle,
  id,
  className,
  'data-testid': testId
}) => {
  const [containerRef, isDesktop] = useContainerSize.useContainerSize(neptuneTokens.Breakpoint.MEDIUM);
  const isControlled = expandedProp !== undefined && onToggle !== undefined;
  const [internalExpanded, setInternalExpanded] = React.useState(true);
  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;
  const handleToggle = isControlled ? onToggle : () => setInternalExpanded(previousExpanded => !previousExpanded);
  const hasActions = action ?? actionSecondary;
  const mediaId = React.useId();
  const titleId = React.useId();
  const descId = React.useId();
  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
  const bannerSurface = /*#__PURE__*/jsxRuntime.jsxs(Container.default, {
    ref: containerRef,
    size: "fluid",
    as: PrimitivePrompt.PrimitivePrompt,
    id: id,
    sentiment: sentiment,
    emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
    "data-testid": testId,
    className: clsx.clsx('wds-critical-banner', 'wds-critical-banner-overhang', {
      'wds-critical-banner--collapsed': !resolvedExpanded,
      'wds-critical-banner--with-two-actions': !!actionSecondary
    }, className),
    media: promptMedia.renderPromptMedia({
      media,
      sentiment,
      mediaId,
      imgClassName: 'wds-critical-banner--media-image'
    }),
    actions: hasActions ? /*#__PURE__*/jsxRuntime.jsxs("div", {
      "aria-hidden": !resolvedExpanded ? true : undefined,
      style: {
        display: 'contents'
      },
      children: [actionSecondary &&
      /*#__PURE__*/
      // @ts-expect-error onClick type mismatch
      jsxRuntime.jsx(Button_resolver.default, {
        v2: true,
        size: "md",
        priority: "secondary",
        href: actionSecondary.href,
        tabIndex: resolvedExpanded ? undefined : -1,
        onClick: actionSecondary?.onClick,
        children: actionSecondary.label
      }), action &&
      /*#__PURE__*/
      // @ts-expect-error onClick type mismatch
      jsxRuntime.jsx(Button_resolver.default, {
        v2: true,
        size: "md",
        priority: "primary",
        href: action.href,
        tabIndex: resolvedExpanded ? undefined : -1,
        onClick: action.onClick,
        children: action.label
      })]
    }) : undefined,
    role: "region",
    "aria-labelledby": ariaLabelledByIds || undefined,
    "aria-describedby": description ? descId : undefined,
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "wds-critical-banner__text-wrapper",
      children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
        id: titleId,
        type: typography.Typography.BODY_LARGE_BOLD,
        className: "wds-critical-banner__content wds-critical-banner__title",
        children: title
      }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
        id: descId,
        className: clsx.clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
          'wds-critical-banner__description--with-title': !!title
        }),
        children: description
      })]
    }), /*#__PURE__*/jsxRuntime.jsx(Expander.ExpanderToggle, {
      expanded: resolvedExpanded,
      size: 24,
      className: "wds-critical-banner__toggle",
      onToggle: handleToggle
    })]
  });
  return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
    "aria-live": "assertive",
    announceOnChange: helpers.buildAnnouncementString({
      title,
      description,
      expanded: resolvedExpanded,
      actionLabel: action?.label,
      actionSecondaryLabel: actionSecondary?.label
    }),
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "wds-critical-banner-overhang-query",
      children: /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "wds-critical-banner__entry-mask",
        children: /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "wds-critical-banner__entry-track",
          children: bannerSurface
        })
      })
    })
  });
};

exports.CriticalBanner = CriticalBanner;
//# sourceMappingURL=CriticalBanner.js.map
