'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var icons = require('@transferwise/icons');
var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.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('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Card = require('../common/card/Card.js');
var Display = require('../display/Display.js');
var Image = require('../image/Image.js');
var Title = require('../title/Title.js');
var PromoCardContext = require('./PromoCardContext.js');
var PromoCardIndicator = require('./PromoCardIndicator.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
  className,
  description,
  defaultChecked,
  download,
  href,
  hrefLang,
  id,
  headingLevel = 'h3',
  imageAlt,
  imageClass,
  imageSource,
  indicatorLabel,
  indicatorIcon,
  isChecked,
  isDisabled,
  onClick,
  onKeyDown,
  rel,
  tabIndex,
  target,
  testId,
  title,
  type,
  value,
  isSmall,
  useDisplayFont = true,
  anchorRef,
  anchorId,
  ...props
}, ref) => {
  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
  // or the value of `isChecked` if it is truthy, or `false` if neither
  // is truthy.
  const {
    state,
    onChange,
    isDisabled: contextIsDisabled
  } = PromoCardContext.usePromoCardContext();
  const [checked, setChecked] = React.useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
  const handleClick = () => {
    if (type === 'radio') {
      onChange(value || ''); // Update the context state for radio
    } else if (type === 'checkbox') {
      setChecked(!checked); // Update local state for checkbox
    }
  };
  const fallbackId = React.useId();
  const componentId = id || fallbackId;
  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
  // `'download'` if `download` is truthy. If neither condition is true, set
  // `icon` to `undefined`.
  // Create a function to get icon type
  const getIconType = () => {
    if (indicatorIcon) {
      return indicatorIcon;
    }
    if (download) {
      return 'download';
    }
    if (href && !type) {
      return 'arrow';
    }
    return undefined;
  };
  // Define all class names string based on the values of the `href`, `type`,
  // `checked`, and `className` props.
  const commonClasses = clsx.clsx({
    'np-Card--promoCard': true,
    'np-Card--checked': !href && type,
    'np-Card--link': href && !type,
    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
  }, className);
  // Object with common props that will be passed to the `Card` components
  const commonProps = {
    className: commonClasses,
    id: componentId,
    isDisabled: isDisabled || contextIsDisabled,
    onClick,
    onKeyDown,
    ref,
    'data-testid': testId,
    isSmall
  };
  // Object with Anchor props that will be passed to the `a` element. These
  // won't be refurned if set to `isDisabled`
  const anchorProps = href && !isDisabled ? {
    download,
    href: href || undefined,
    hrefLang,
    rel,
    target,
    ref: anchorRef,
    id: anchorId
  } : {};
  // Object of all Checked props that will be passed to the root `Card` component
  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
    ...commonProps,
    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
    'aria-describedby': `${componentId}-title`,
    'aria-disabled': isDisabled,
    'data-value': value ?? undefined,
    role: type === 'checkbox' || type === 'radio' ? type : undefined,
    onClick: handleClick,
    onKeyDown: event => {
      if (event.key === 'Enter' || event.key === ' ') {
        handleClick();
      }
    },
    ref,
    tabIndex: 0
  } : {};
  const getTitle = () => {
    const titleContent = href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
      className: "np-Card-titleLink",
      ...anchorProps,
      children: title
    }) : title;
    const titleProps = {
      id: `${componentId}-title`,
      as: headingLevel,
      className: 'np-Card-title'
    };
    return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display.default, {
      type: typography.Typography.DISPLAY_SMALL,
      ...titleProps,
      children: titleContent
    }) : /*#__PURE__*/jsxRuntime.jsx(Title.default, {
      type: typography.Typography.TITLE_SUBSECTION,
      ...titleProps,
      children: titleContent
    });
  };
  React.useEffect(() => {
    setChecked(defaultChecked ?? isChecked ?? false);
  }, [defaultChecked, isChecked]);
  return /*#__PURE__*/jsxRuntime.jsxs(Card.default, {
    ...commonProps,
    ...checkedProps,
    ...props,
    children: [(value === state || checked) && /*#__PURE__*/jsxRuntime.jsx("span", {
      className: "np-Card-check",
      children: /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
        size: 24,
        "aria-hidden": "true"
      })
    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
      className: "np-Card-description",
      children: description
    }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: clsx.clsx('np-Card-image', {
        imageClass
      }),
      children: /*#__PURE__*/jsxRuntime.jsx(Image.default, {
        src: imageSource,
        alt: imageAlt || '',
        loading: "lazy"
      })
    }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator.default, {
      label: indicatorLabel,
      icon: getIconType(),
      isSmall: isSmall
    })]
  });
});
var PromoCard = /*#__PURE__*/React__default.default.memo(PromoCard$1);

exports.default = PromoCard;
//# sourceMappingURL=PromoCard.js.map
