import { useTheme } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useState, useEffect } from 'react';
import { jsx, Fragment } from 'react/jsx-runtime';
import { Size } from '../common/propsValues/size.mjs';

const Loader = ({
  small = false,
  size = Size.MEDIUM,
  displayInstantly = false,
  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__*/jsx("div", {
    className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
      'tw-loader--visible': hasDebounced
    }),
    "data-testid": restProps['data-testid']
  });
};
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
