'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
var status = require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');

const radius = {
  xxs: 6,
  xs: 11,
  sm: 22,
  xl: 61
};
const ANIMATION_DURATION_IN_MS = 1500;
class ProcessIndicator extends React.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: status$1
    } = this.state;
    const classes = clsx.clsx(`process process-${size}`, className, {
      [`process-danger`]: status$1 === status.Status.FAILED,
      [`process-stopped`]: status$1 === status.Status.HIDDEN,
      [`process-success`]: status$1 === status.Status.SUCCEEDED
    });
    return /*#__PURE__*/jsxRuntime.jsxs("span", {
      className: classes,
      "data-testid": dataTestId,
      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
        className: "process-icon-container",
        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
          className: "process-icon-horizontal"
        }), /*#__PURE__*/jsxRuntime.jsx("span", {
          className: "process-icon-vertical"
        })]
      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
          className: "process-circle",
          cx: "50%",
          cy: "50%",
          r: radius[size],
          fillOpacity: "0.0"
        })
      })]
    });
  }
}

exports.default = ProcessIndicator;
//# sourceMappingURL=ProcessIndicator.js.map
