import React, { useRef } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { Message, MESSAGE_TYPES } from '../message';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
/** Shows loader when content is not ready
 * [CAPITALIZATION] Use sentence case
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const LoadingBackdrop = ({
  message,
  isLoading = true,
  customClassName = '',
  onTransitionEnd = () => {},
  testId = 'loading-backdrop'
}) => {
  const {
    t
  } = useTranslation();
  const nodeRef = useRef(null);
  return /*#__PURE__*/_jsx(CSSTransition, {
    classNames: "loading-backdrop",
    nodeRef: nodeRef,
    in: isLoading,
    onExited: onTransitionEnd,
    timeout: 500,
    appear: true,
    children: /*#__PURE__*/_jsx("div", {
      ref: nodeRef,
      className: classNames('loading-backdrop center-status ', customClassName),
      "test-id": testId,
      children: /*#__PURE__*/_jsx(Message, {
        type: MESSAGE_TYPES.IN_PROGRESS,
        children: message ?? t('Loading...')
      })
    })
  });
};