import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread";

/**
 * Web ProgressIndicator Component
 *
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { isTrue, registerElement, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
import ProgressIndicatorCircular from './ProgressIndicatorCircular';
const renderProps = {
  on_complete: null
};
export const propTypes = {
  visible: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  type: PropTypes.oneOf(['circular']),
  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
  progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  // Web Component props
  on_complete: PropTypes.func
};
export const defaultProps = _objectSpread({
  visible: true,
  type: 'circular',
  no_animation: false,
  size: 'medium',
  progress: null
}, renderProps);
export default class ProgressIndicator extends PureComponent {
  constructor() {
    super(...arguments);

    _defineProperty(this, "state", {
      _listenForPropChanges: true
    });

    _defineProperty(this, "callOnCompleteHandler", () => {
      this.completeTimeout = setTimeout(() => {
        this.setState({
          complete: true
        });

        if (typeof this.props.on_complete === 'function') {
          this.fadeOutTimeout = setTimeout(() => {
            dispatchCustomElementEvent(this, 'on_complete');
          }, 600); // wait for CSS fade out, defined in "progress-indicator-fade-out"
        }
      }, 200);
    });
  }

  static enableWebComponent() {
    registerElement(ProgressIndicator.tagName, ProgressIndicator, defaultProps);
  }

  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      state.visible = isTrue(props.visible);

      if (state.visible) {
        state.complete = false;
      }

      if (parseFloat(props.progress) > -1) {
        state.progress = props.progress;
      }
    }

    state._listenForPropChanges = true;
    return state;
  }

  componentWillUnmount() {
    clearTimeout(this.completeTimeout);
    clearTimeout(this.fadeOutTimeout);
  }

  render() {
    const _this$props = this.props,
          {
      type,
      size,
      no_animation,
      on_complete,
      progress: _progress,
      //eslint-disable-line
      visible: _visible,
      //eslint-disable-line
      complete: _complete
    } = _this$props,
          props = _objectWithoutProperties(_this$props, ["type", "size", "no_animation", "on_complete", "progress", "visible", "complete"]);

    const {
      progress,
      visible,
      complete
    } = this.state;

    const params = _objectSpread({}, props);

    const hasProgressIndicator = parseFloat(progress) > -1;

    if (visible && !hasProgressIndicator) {
      params.role = 'alert';
      params['aria-busy'] = 'true';
    }

    validateDOMAttributes(this.props, params);
    return React.createElement("div", _extends({
      className: classnames('dnb-progress-indicator', visible && 'dnb-progress-indicator--visible', complete && 'dnb-progress-indicator--complete', isTrue(no_animation) && 'dnb-progress-indicator--no-animation')
    }, params), type === 'circular' && React.createElement(ProgressIndicatorCircular, {
      size: size,
      progress: progress,
      visible: visible,
      complete: complete,
      onComplete: on_complete,
      callOnCompleteHandler: this.callOnCompleteHandler
    }));
  }

}

_defineProperty(ProgressIndicator, "tagName", 'dnb-progress-indicator');

_defineProperty(ProgressIndicator, "defaultProps", defaultProps);

ProgressIndicator.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};