import { forwardRef } from 'react';
import { clsx } from 'clsx';
import PrimitiveButton from '../../../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
import PrimitiveAnchor from '../../../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
import ProcessIndicator from '../../../processIndicator/ProcessIndicator.mjs';
import AvatarLayout from '../../../avatarLayout/AvatarLayout.mjs';
import AvatarView from '../../../avatarView/AvatarView.mjs';
import Circle from '../../../common/circle/Circle.mjs';
import * as Icons from '@transferwise/icons';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

const Button = /*#__PURE__*/forwardRef(({
  as = 'button',
  children,
  className,
  disabled,
  loading = false,
  block = false,
  size = 'md',
  priority = 'primary',
  appearance,
  iconLeft,
  iconRight,
  iconOnly,
  avatars,
  type,
  ...props
}, ref) => {
  const isButtonIconSize = value => {
    return [16, 24, 32, 40, 48, 56, 72].includes(value);
  };
  let sizeClass;
  if (iconOnly && isButtonIconSize(size)) {
    // If iconOnly is true and size is a ButtonIconSize, return the size as a string
    sizeClass = size.toString();
  } else {
    // Otherwise, handle ButtonSize
    sizeClass = size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
  }
  const classNames = clsx({
    [`wds-Button`]: as === 'a',
    [`wds-Button--block`]: block,
    [`wds-Button--${sizeClass}`]: size,
    [`wds-Button--${priority}`]: priority,
    [`wds-Button--${appearance}`]: appearance,
    [`wds-Button--iconOnly`]: iconOnly
  }, className);
  const contentClassNames = clsx('wds-Button-content', {
    [`wds-Button-content--loading`]: loading
  });
  const LeftIcon = iconLeft ? Icons[iconLeft] : null;
  const RightIcon = iconRight ? Icons[iconRight] : null;
  const IconOnly = iconOnly ? Icons[iconOnly] : null;
  const content = /*#__PURE__*/jsxs("span", {
    className: contentClassNames,
    children: [loading && /*#__PURE__*/jsx(ProcessIndicator, {
      size: "xs",
      className: "wds-Button-loader",
      "data-testid": "button-loader-indicator"
    }), /*#__PURE__*/jsx("span", {
      className: "wds-Button-label",
      "aria-hidden": loading,
      children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
        children: [size === 'md' && avatars && /*#__PURE__*/jsx("span", {
          className: "wds-Button-avatars",
          children: avatars.length === 1 ? /*#__PURE__*/jsx(AvatarView, {
            size: 24,
            children: avatars[0]?.asset
          }) : /*#__PURE__*/jsx(AvatarLayout, {
            orientation: "horizontal",
            avatars: avatars,
            size: 24
          })
        }), !avatars && LeftIcon && /*#__PURE__*/jsx(LeftIcon, {
          className: "wds-Button-icon wds-Button-icon--left"
        }), children, RightIcon && /*#__PURE__*/jsx(RightIcon, {
          className: "wds-Button-icon wds-Button-icon--right"
        })]
      })
    })]
  });
  if (iconOnly) {
    const CircleContent = /*#__PURE__*/jsx(Circle, {
      ref: ref,
      as: as === 'a' ? PrimitiveAnchor : PrimitiveButton,
      size: size || 40,
      fixedSize: true,
      ...props,
      className: classNames,
      disabled: disabled,
      "aria-label": children,
      children: IconOnly && /*#__PURE__*/jsx(IconOnly, {
        className: "wds-Button-icon"
      })
    });
    return CircleContent;
  }
  if (as === 'a') {
    return /*#__PURE__*/jsx(PrimitiveAnchor, {
      ref: ref,
      ...props,
      className: classNames,
      disabled: disabled,
      children: content
    });
  }
  return /*#__PURE__*/jsx(PrimitiveButton, {
    ref: ref,
    ...props,
    className: classNames,
    disabled: disabled,
    loading: loading,
    type: type,
    children: content
  });
});
Button.displayName = 'Button';

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