import { clsx } from 'clsx';
import { Component } from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../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 { Status } from '../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 { jsxs, jsx } from 'react/jsx-runtime';

const radius = {
  xxs: 6,
  xs: 11,
  sm: 22,
  xl: 61
};
const ANIMATION_DURATION_IN_MS = 1500;
class ProcessIndicator extends Component {
  static defaultProps = {
    status: 'processing',
    size: 'sm'
  };
  interval = 0;
  timeout = 0;
  constructor(props) {
    super(props);
    this.state = {
      status: props.status,
      size: props.size
    };
  }
  /**
   * Create interval for animation duration (1500ms)
   * Update state only at the end of every interval
   * (end of animation loop) if props changed before end of animation
   */
  componentDidMount() {
    this.interval = window.setInterval(() => {
      const {
        status: targetStatus,
        size: targetSize,
        onAnimationCompleted
      } = this.props;
      const {
        status: currentStatus,
        size: currentSize
      } = this.state;
      if (currentStatus !== targetStatus) {
        this.setState({
          status: targetStatus
        }, () => {
          if (onAnimationCompleted) {
            this.timeout = window.setTimeout(() => {
              onAnimationCompleted(targetStatus);
            }, ANIMATION_DURATION_IN_MS);
          }
        });
      }
      if (currentSize !== targetSize) {
        this.setState({
          size: targetSize
        });
      }
    }, ANIMATION_DURATION_IN_MS);
  }
  /**
   * Only trigger render if comopnent's state got
   * updated from interval callback
   */
  shouldComponentUpdate(nextProps, nextState) {
    const isSameStatus = nextProps.status === nextState.status;
    const isSameSize = nextProps.size === nextState.size;
    return isSameStatus && isSameSize;
  }
  // Clear interval before destroying component
  componentWillUnmount() {
    window.clearInterval(this.interval);
    window.clearTimeout(this.timeout);
  }
  render() {
    const {
      className,
      'data-testid': dataTestId
    } = this.props;
    const {
      size,
      status
    } = this.state;
    const classes = clsx(`process process-${size}`, className, {
      [`process-danger`]: status === Status.FAILED,
      [`process-stopped`]: status === Status.HIDDEN,
      [`process-success`]: status === Status.SUCCEEDED
    });
    return /*#__PURE__*/jsxs("span", {
      className: classes,
      "data-testid": dataTestId,
      children: [/*#__PURE__*/jsxs("span", {
        className: "process-icon-container",
        children: [/*#__PURE__*/jsx("span", {
          className: "process-icon-horizontal"
        }), /*#__PURE__*/jsx("span", {
          className: "process-icon-vertical"
        })]
      }), /*#__PURE__*/jsx("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        children: /*#__PURE__*/jsx("circle", {
          className: "process-circle",
          cx: "50%",
          cy: "50%",
          r: radius[size],
          fillOpacity: "0.0"
        })
      })]
    });
  }
}

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