import { clsx } from 'clsx';
import { Breakpoint } from '@transferwise/neptune-tokens';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../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 '../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/formatting';
import '@transferwise/icons';
import 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, Fragment } from 'react/jsx-runtime';
import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
import NavigationOption from '../navigationOption/NavigationOption.mjs';
import Tile from '../tile/Tile.mjs';

var DecisionPresentation;
(function (DecisionPresentation) {
  DecisionPresentation["LIST"] = "LIST";
  DecisionPresentation["LIST_BLOCK"] = "LIST_BLOCK";
  DecisionPresentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
})(DecisionPresentation || (DecisionPresentation = {}));
var DecisionType;
(function (DecisionType) {
  DecisionType["NAVIGATION"] = "NAVIGATION";
})(DecisionType || (DecisionType = {}));
const Decision = ({
  options,
  presentation = DecisionPresentation.LIST,
  size = Size.MEDIUM,
  type = DecisionType.NAVIGATION,
  showMediaCircleInList = true,
  isContainerAligned = false
}) => {
  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
  const screenSm = useScreenSize(Breakpoint.SMALL);
  if (type === DecisionType.NAVIGATION) {
    const renderedOptions = options.map(({
      'aria-label': ariaLabel,
      title,
      description,
      disabled,
      href,
      target,
      media: {
        list
      },
      onClick
    }, key) => /*#__PURE__*/jsx(NavigationOption
    // eslint-disable-next-line react/no-array-index-key
    , {
      "aria-label": ariaLabel,
      complex: false,
      content: description,
      disabled: disabled,
      href: href,
      target: target,
      media: list,
      showMediaAtAllSizes: true,
      showMediaCircle: showMediaCircleInList,
      isContainerAligned: isContainerAligned,
      title: title,
      onClick: onClick
    }, `nav-${key}`));
    if (presentation === DecisionPresentation.LIST_BLOCK || presentation === DecisionPresentation.LIST_BLOCK_GRID) {
      const isSmall = size === Size.SMALL;
      const breakpoint = isSmall ? screenXs : screenSm;
      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;
      return /*#__PURE__*/jsx("div", {
        className: clsx('np-decision d-flex', {
          'np-decision--small': isSmall,
          'np-decision--grid': isGrid
        }, breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
        children: breakpoint ? options.map(({
          'aria-label': ariaLabel,
          description,
          disabled,
          href,
          target,
          media: {
            block
          },
          onClick,
          title
        }, key) => /*#__PURE__*/jsx(Tile
        // eslint-disable-next-line react/no-array-index-key
        , {
          className: clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
            'np-decision__tile--fixed-width': isGrid
          }),
          "aria-label": ariaLabel,
          description: description,
          disabled: disabled,
          href: href,
          target: target,
          media: block,
          size: isSmall ? Size.SMALL : Size.MEDIUM,
          title: title,
          onClick: onClick
        }, `tile-${key}`)) : renderedOptions
      });
    }
    // LIST
    return /*#__PURE__*/jsx(Fragment, {
      children: renderedOptions
    });
  }
  return null;
};

export { DecisionPresentation, DecisionType, Decision as default };
//# sourceMappingURL=Decision.mjs.map
