'use strict';

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

var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var ActionButton = require('../actionButton/ActionButton.js');
var Body = require('../body/Body.js');
var DirectionProvider = require('../provider/direction/DirectionProvider.js');
var withNextPortal = require('../withNextPortal/withNextPortal.js');
var jsxRuntime = require('react/jsx-runtime');

const CSS_TRANSITION_DURATION = 400;
class Snackbar extends React.Component {
  bodyRef = /*#__PURE__*/React.createRef();
  timeout = 0;
  transitionTimeout = 0;
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      text: ''
    };
  }
  componentWillUnmount() {
    window.clearTimeout(this.timeout);
    window.clearTimeout(this.transitionTimeout);
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (!nextProps.text) {
      return false;
    }
    if (nextProps.timestamp === this.props.timestamp && nextState.visible === this.state.visible && nextState.text === this.state.text) {
      return false;
    }
    return true;
  }
  setLeaveTimeout = () => {
    const {
      timeout
    } = this.props;
    this.timeout = window.setTimeout(() => {
      this.setState({
        visible: false
      });
    }, timeout);
  };
  componentDidUpdate(previousProps) {
    const {
      action,
      text,
      timestamp
    } = this.props;
    if (!previousProps.text) {
      this.setState({
        visible: true,
        action,
        text
      }, () => {
        this.setLeaveTimeout();
      });
    } else if (previousProps.timestamp !== timestamp) {
      window.clearTimeout(this.timeout);
      if (this.state.visible) {
        this.setState({
          visible: false
        }, () => {
          this.transitionTimeout = window.setTimeout(() => {
            this.setState({
              visible: true,
              action,
              text
            });
            this.setLeaveTimeout();
          }, CSS_TRANSITION_DURATION);
        });
      } else {
        this.setState({
          visible: true,
          action,
          text
        });
        this.setLeaveTimeout();
      }
    }
  }
  render() {
    const {
      action,
      text,
      visible
    } = this.state;
    const {
      timeout
    } = this.props;
    return /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "snackbar",
      "aria-live": "assertive",
      role: "alert",
      children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
        nodeRef: this.bodyRef,
        in: visible,
        classNames: "snackbar__text-container",
        timeout: {
          appear: 0,
          enter: timeout,
          exit: CSS_TRANSITION_DURATION
        },
        unmountOnExit: true,
        children: /*#__PURE__*/jsxRuntime.jsxs(Body, {
          ref: this.bodyRef,
          as: "span",
          className: "snackbar__text",
          children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
            className: "snackbar__text__action",
            onClick: action.onClick,
            children: action.label
          }) : null]
        })
      })
    });
  }
}
Snackbar.contextType = DirectionProvider.DirectionContext;
var SnackbarPortal = withNextPortal(Snackbar);

exports.Snackbar = Snackbar;
exports.default = SnackbarPortal;
//# sourceMappingURL=Snackbar.js.map
