'use strict';

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

var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
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');
var sentiment = 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');
var clsx = require('clsx');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Body = require('../body/Body.js');
var ListItemAdditionalInfo = require('./AdditionalInfo/ListItemAdditionalInfo.js');
var ListItemIconButton = require('./IconButton/ListItemIconButton.js');
var ListItemCheckbox = require('./Checkbox/ListItemCheckbox.js');
var ListItemNavigation = require('./Navigation/ListItemNavigation.js');
var ListItemButton = require('./Button/ListItemButton.js');
var ListItemRadio = require('./Radio/ListItemRadio.js');
var ListItemSwitch = require('./Switch/ListItemSwitch.js');
var ListItemAvatarLayout = require('./AvatarLayout/ListItemAvatarLayout.js');
var ListItemAvatarView = require('./AvatarView/ListItemAvatarView.js');
var ListItemImage = require('./Image/ListItemImage.js');
var ListItemPrompt = require('./Prompt/ListItemPrompt.js');
require('../primitives/PrimitiveButton/PrimitiveButton.js');
var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
var ListItemContext = require('./ListItemContext.js');

const ListItem = ({
  as: ListItemElement = 'li',
  title,
  subtitle,
  additionalInfo,
  prompt,
  inverted,
  media,
  spotlight,
  valueTitle,
  valueSubtitle,
  control = null,
  disabled,
  disabledPromptMessage,
  className,
  valueColumnWidth,
  id
}) => {
  const idPrefix = React.useId();
  const [controlProps, setControlProps] = React.useState({});
  const [controlType, setControlType] = React.useState('non-interactive');
  const [mediaSize, setMediaSize] = React.useState();
  const ids = {
    title: `${idPrefix}_title`,
    ...(subtitle ? {
      subtitle: `${idPrefix}_subtitle`
    } : {}),
    ...(valueTitle ? {
      valueTitle: `${idPrefix}_value-title`
    } : {}),
    ...(valueSubtitle ? {
      valueSubtitle: `${idPrefix}_value-subtitle`
    } : {}),
    control: `${idPrefix}_control`,
    ...(prompt || disabled && disabledPromptMessage ? {
      prompt: `${idPrefix}_prompt`
    } : {}),
    ...(additionalInfo ? {
      additionalInfo: `${idPrefix}_additional-info`
    } : {})
  };
  const isPartiallyInteractive = Boolean((controlType === 'button' || controlType === 'icon-button') && controlProps?.partiallyInteractive);
  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;
  const isButtonAsLink = (controlType === 'button' || controlType === 'icon-button') && Boolean(controlProps?.href);
  const titlesAndValues = [inverted ? ids.subtitle : ids.title, inverted ? ids.title : ids.subtitle, inverted ? ids.valueSubtitle : ids.valueTitle, inverted ? ids.valueTitle : ids.valueSubtitle].join(' ');
  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');
  const describedByIds = React.useMemo(() => {
    return isFullyInteractive && !isButtonAsLink ? additionalInfoPrompt : `${titlesAndValues} ${additionalInfoPrompt}`;
  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);
  const listItemContext = React.useMemo(() => ({
    setControlType,
    setControlProps,
    setMediaSize,
    ids,
    props: {
      disabled,
      inverted,
      disabledPromptMessage
    },
    mediaSize,
    isPartiallyInteractive,
    describedByIds
  }), [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive]);
  const gridColumnsStyle = {
    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr'
  };
  const getFeatureClassName = () => {
    const partials = [];
    const hasMedia = Boolean(media);
    const hasControl = Boolean(control);
    const hasInfo = Boolean(additionalInfo);
    const hasPrompt = Boolean(prompt) || disabled && Boolean(disabledPromptMessage);
    /* eslint-disable functional/immutable-data */
    if (hasMedia && hasControl) {
      partials.push('wds-list-item-hasMedia-hasControl');
    }
    if (hasMedia && !hasControl) {
      partials.push('wds-list-item-hasMedia-noControl');
    }
    if (!hasMedia && hasControl) {
      partials.push('wds-list-item-noMedia-hasControl');
    }
    if (!hasMedia && !hasControl) {
      partials.push('wds-list-item-noMedia-noControl');
    }
    if (hasInfo && hasPrompt) {
      partials.push('wds-list-item-hasInfo-hasPrompt');
    }
    if (hasInfo && !hasPrompt) {
      partials.push('wds-list-item-hasInfo-noPrompt');
    }
    if (!hasInfo && hasPrompt) {
      partials.push('wds-list-item-noInfo-hasPrompt');
    }
    if (!hasInfo && !hasPrompt) {
      partials.push('wds-list-item-noInfo-noPrompt');
    }
    /* eslint-enable functional/immutable-data */
    return partials.join(' ');
  };
  return /*#__PURE__*/jsxRuntime.jsx(ListItemContext.ListItemContext.Provider, {
    value: listItemContext,
    children: /*#__PURE__*/jsxRuntime.jsxs(ListItemElement, {
      className: clsx.clsx('wds-list-item', `wds-list-item-${controlType}`, getFeatureClassName(), {
        'wds-list-item-interactive': isFullyInteractive,
        'wds-list-item-partially-interactive': isPartiallyInteractive,
        [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
        disabled: disabled && !isPartiallyInteractive,
        'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive
      }, className),
      id: id,
      "aria-disabled": disabled,
      style: {
        '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined
      },
      children: [isFullyInteractive && spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
        "aria-hidden": "true",
        className: "wds-list-item-spotlight__border",
        children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
      }), /*#__PURE__*/jsxRuntime.jsxs(View, {
        isPartiallyInteractive,
        subtitle,
        additionalInfo,
        disabled,
        disabledPromptMessage,
        prompt,
        controlType,
        controlProps,
        className: getFeatureClassName(),
        children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "wds-list-item-media",
          children: media
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "wds-list-item-body",
          style: valueColumnWidth ? gridColumnsStyle : undefined,
          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
            className: "wds-list-item-titles",
            children: (() => {
              const titles = [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                id: ids.title,
                type: typography.Typography.BODY_LARGE_BOLD,
                className: "wds-list-item-title",
                children: title
              }, ids.title)];
              if (subtitle) {
                titles.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                  id: ids.subtitle,
                  className: "wds-list-item-subtitle",
                  children: subtitle
                }, ids.subtitle));
              }
              return inverted ? [...titles].reverse() : titles;
            })()
          }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
            className: clsx.clsx('wds-list-item-value', {
              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
            }),
            children: (() => {
              const values = [];
              if (valueTitle) {
                values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                  id: ids.valueTitle,
                  type: typography.Typography.BODY_LARGE_BOLD,
                  className: "wds-list-item-title-value",
                  children: valueTitle
                }, ids.valueTitle));
              }
              if (valueSubtitle) {
                values.push(/*#__PURE__*/jsxRuntime.jsx(Body.default, {
                  id: ids.valueSubtitle,
                  className: "wds-list-item-subtitle-value",
                  children: valueSubtitle
                }, ids.valueSubtitle));
              }
              return inverted ? [...values].reverse() : values;
            })()
          })]
        }), control === null ? null : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
          className: clsx.clsx('wds-list-item-control-wrapper', {
            'wds-list-item-button-control': controlType === 'button',
            'wds-list-item-button-control--hasPrompt': controlType === 'button' && Boolean(prompt)
          }),
          style: {
            '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
          },
          children: control
        })]
      })]
    })
  });
};
function View({
  children,
  additionalInfo,
  prompt,
  disabled,
  disabledPromptMessage,
  isPartiallyInteractive,
  controlType = 'non-interactive',
  controlProps,
  className = ''
}) {
  const {
    ids,
    describedByIds
  } = React.useContext(ListItemContext.ListItemContext);
  const isLinkControl = ['navigation'].includes(controlType);
  const isHrefProvided = isLinkControl && !!controlProps?.href;
  const renderExtras = () => {
    const resolvedPrompt = disabled && disabledPromptMessage && !prompt ? /*#__PURE__*/jsxRuntime.jsx(ListItemPrompt.Prompt, {
      sentiment: sentiment.Sentiment.NEUTRAL,
      children: disabledPromptMessage
    }) : prompt;
    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [additionalInfo, resolvedPrompt]
    });
  };
  if (isLinkControl && isHrefProvided) {
    return (
      /*#__PURE__*/
      // for link instances of .Navigation, .IconButton, .Button
      jsxRuntime.jsxs("div", {
        className: clsx.clsx('wds-list-item-gridWrapper', className),
        children: [/*#__PURE__*/jsxRuntime.jsx(PrimitiveAnchor.default, {
          "aria-describedby": describedByIds,
          href: controlProps?.href,
          target: controlProps?.target,
          className: clsx.clsx('wds-list-item-view', {
            'wds-list-item-control': controlType === 'navigation',
            fullyInteractive: !isPartiallyInteractive
          }),
          disabled: disabled,
          onClick: controlProps?.onClick,
          children: children
        }), renderExtras()]
      })
    );
  }
  if (isPartiallyInteractive || controlType === 'non-interactive') {
    return /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: clsx.clsx('wds-list-item-gridWrapper', className),
      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
        className: "wds-list-item-view",
        children: children
      }), renderExtras()]
    });
  }
  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.
  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';
  return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
    className: clsx.clsx('wds-list-item-gridWrapper', className),
    children: [/*#__PURE__*/jsxRuntime.jsx("label", {
      htmlFor: ids.control,
      className: clsx.clsx('wds-list-item-view', {
        clickable: !disabled,
        fullyInteractive: !isPartiallyInteractive
      }),
      children: children
    }), renderExtras()]
  });
}
ListItem.Image = ListItemImage.Image;
ListItem.AvatarView = ListItemAvatarView.AvatarView;
ListItem.AvatarLayout = ListItemAvatarLayout.AvatarLayout;
ListItem.AdditionalInfo = ListItemAdditionalInfo.AdditionalInfo;
ListItem.Checkbox = ListItemCheckbox.Checkbox;
ListItem.Radio = ListItemRadio.Radio;
ListItem.IconButton = ListItemIconButton.IconButton;
ListItem.Navigation = ListItemNavigation.Navigation;
ListItem.Button = ListItemButton.Button;
ListItem.Switch = ListItemSwitch.Switch;
ListItem.Prompt = ListItemPrompt.Prompt;

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