import { useTheme } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useState, useEffect } from 'react';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import { Size } from '../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 '../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-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

const Loader = ({
  small = false,
  size = Size.MEDIUM,
  displayInstantly = false,
  label,
  classNames = {},
  ...restProps
}) => {
  const {
    theme
  } = useTheme();
  const [hasDebounced, setHasDebounced] = useState(displayInstantly);
  useEffect(() => {
    let cancelled;
    let timeout;
    if (!displayInstantly) {
      timeout = setTimeout(() => {
        if (!cancelled) {
          setHasDebounced(true);
        }
      }, 1000);
    }
    return () => {
      cancelled = true;
      clearTimeout(timeout);
    };
  }, []);
  const style = className => classNames[className] || className;
  const legacySize = small ? Size.SMALL : size;
  const supportedSize = getSupportedSize(legacySize);
  if (theme === 'forest-green') {
    // eslint-disable-next-line no-console
    console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
    return /*#__PURE__*/jsx(Fragment, {});
  }
  return /*#__PURE__*/jsxs("div", {
    className: style('tw-loader'),
    "data-testid": restProps['data-testid'],
    children: [/*#__PURE__*/jsx("div", {
      className: clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
        'tw-loader-asset--visible': hasDebounced
      })
    }), label && hasDebounced && /*#__PURE__*/jsx(Body, {
      type: Typography.BODY_LARGE_BOLD,
      as: "span",
      className: style('text-secondary'),
      children: label
    })]
  });
};
const getSupportedSize = size => {
  switch (size) {
    case Size.SMALL:
    case Size.EXTRA_SMALL:
      return Size.SMALL;
    case Size.EXTRA_LARGE:
    case Size.LARGE:
    case Size.MEDIUM:
    default:
      return Size.MEDIUM;
  }
};

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