import { useId, useState, useMemo, useContext } from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import '../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 '../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 '@transferwise/icons';
import { clsx } from 'clsx';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Body from '../body/Body.mjs';
import { AdditionalInfo } from './AdditionalInfo/ListItemAdditionalInfo.mjs';
import { IconButton } from './IconButton/ListItemIconButton.mjs';
import { Checkbox } from './Checkbox/ListItemCheckbox.mjs';
import { Navigation } from './Navigation/ListItemNavigation.mjs';
import { Button } from './Button/ListItemButton.mjs';
import { Radio } from './Radio/ListItemRadio.mjs';
import { Switch } from './Switch/ListItemSwitch.mjs';
import { AvatarLayout } from './AvatarLayout/ListItemAvatarLayout.mjs';
import { AvatarView } from './AvatarView/ListItemAvatarView.mjs';
import { Image } from './Image/ListItemImage.mjs';
import { Prompt } from './Prompt/ListItemPrompt.mjs';
import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
import { ListItemContext } from './ListItemContext.mjs';

const ListItem = ({
  as: ListItemElement = 'li',
  title,
  subtitle,
  additionalInfo,
  prompt,
  inverted,
  media,
  spotlight,
  valueTitle,
  valueSubtitle,
  control = null,
  disabled,
  disabledPromptMessage,
  className,
  valueColumnWidth,
  id
}) => {
  const idPrefix = useId();
  const [controlProps, setControlProps] = useState({});
  const [controlType, setControlType] = useState('non-interactive');
  const [mediaSize, setMediaSize] = 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 = useMemo(() => {
    return isFullyInteractive && !isButtonAsLink ? additionalInfoPrompt : `${titlesAndValues} ${additionalInfoPrompt}`;
  }, [isFullyInteractive]);
  const listItemContext = useMemo(() => ({
    setControlType,
    setControlProps,
    setMediaSize,
    ids,
    props: {
      disabled,
      inverted,
      disabledPromptMessage
    },
    mediaSize,
    isPartiallyInteractive,
    describedByIds
  }), [describedByIds, mediaSize]);
  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__*/jsx(ListItemContext.Provider, {
    value: listItemContext,
    children: /*#__PURE__*/jsxs(ListItemElement, {
      className: 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__*/jsx("svg", {
        "aria-hidden": "true",
        className: "wds-list-item-spotlight__border",
        children: /*#__PURE__*/jsx("rect", {})
      }), /*#__PURE__*/jsxs(View, {
        isPartiallyInteractive,
        subtitle,
        additionalInfo,
        disabled,
        disabledPromptMessage,
        prompt,
        controlType,
        controlProps,
        className: getFeatureClassName(),
        children: [media && /*#__PURE__*/jsx("div", {
          className: "wds-list-item-media",
          children: media
        }), /*#__PURE__*/jsxs("div", {
          className: "wds-list-item-body",
          style: valueColumnWidth ? gridColumnsStyle : undefined,
          children: [/*#__PURE__*/jsx("span", {
            className: "wds-list-item-titles",
            children: (() => {
              const titles = [/*#__PURE__*/jsx(Body, {
                id: ids.title,
                type: Typography.BODY_LARGE_BOLD,
                className: "wds-list-item-title",
                children: title
              }, ids.title)];
              if (subtitle) {
                titles.push(/*#__PURE__*/jsx(Body, {
                  id: ids.subtitle,
                  className: "wds-list-item-subtitle",
                  children: subtitle
                }, ids.subtitle));
              }
              return inverted ? [...titles].reverse() : titles;
            })()
          }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsx("span", {
            className: clsx('wds-list-item-value', {
              'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
            }),
            children: (() => {
              const values = [];
              if (valueTitle) {
                values.push(/*#__PURE__*/jsx(Body, {
                  id: ids.valueTitle,
                  type: Typography.BODY_LARGE_BOLD,
                  className: "wds-list-item-title-value",
                  children: valueTitle
                }, ids.valueTitle));
              }
              if (valueSubtitle) {
                values.push(/*#__PURE__*/jsx(Body, {
                  id: ids.valueSubtitle,
                  className: "wds-list-item-subtitle-value",
                  children: valueSubtitle
                }, ids.valueSubtitle));
              }
              return inverted ? [...values].reverse() : values;
            })()
          })]
        }), control === null ? null : /*#__PURE__*/jsx(Body, {
          className: 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
  } = useContext(ListItemContext);
  const isLinkControl = ['navigation'].includes(controlType);
  const isHrefProvided = isLinkControl && !!controlProps?.href;
  const renderExtras = () => {
    const resolvedPrompt = disabled && disabledPromptMessage && !prompt ? /*#__PURE__*/jsx(Prompt, {
      sentiment: Sentiment.NEUTRAL,
      children: disabledPromptMessage
    }) : prompt;
    return /*#__PURE__*/jsxs(Fragment, {
      children: [additionalInfo, resolvedPrompt]
    });
  };
  if (isLinkControl && isHrefProvided) {
    return (
      /*#__PURE__*/
      // for link instances of .Navigation, .IconButton, .Button
      jsxs("div", {
        className: clsx('wds-list-item-gridWrapper', className),
        children: [/*#__PURE__*/jsx(PrimitiveAnchor, {
          "aria-describedby": describedByIds,
          href: controlProps?.href,
          target: controlProps?.target,
          className: clsx('wds-list-item-view d-flex flex-row', {
            'wds-list-item-control': controlType === 'navigation',
            fullyInteractive: !isPartiallyInteractive
          }),
          disabled: disabled,
          onClick: controlProps?.onClick,
          children: children
        }), renderExtras()]
      })
    );
  }
  if (isPartiallyInteractive || controlType === 'non-interactive') {
    return /*#__PURE__*/jsxs("div", {
      className: clsx('wds-list-item-gridWrapper', className),
      children: [/*#__PURE__*/jsx("div", {
        className: clsx('wds-list-item-view d-flex flex-row'),
        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__*/jsxs(InputWrapper, {
    className: clsx('wds-list-item-gridWrapper', className),
    children: [/*#__PURE__*/jsx("label", {
      htmlFor: ids.control,
      className: clsx('wds-list-item-view', {
        clickable: !disabled,
        fullyInteractive: !isPartiallyInteractive
      }),
      children: children
    }), renderExtras()]
  });
}
ListItem.Image = Image;
ListItem.AvatarView = AvatarView;
ListItem.AvatarLayout = AvatarLayout;
ListItem.AdditionalInfo = AdditionalInfo;
ListItem.Checkbox = Checkbox;
ListItem.Radio = Radio;
ListItem.IconButton = IconButton;
ListItem.Navigation = Navigation;
ListItem.Button = Button;
ListItem.Switch = Switch;
ListItem.Prompt = Prompt;

export { ListItem, ListItem as default };
//# sourceMappingURL=ListItem.mjs.map
