import cx from 'classnames';
import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import theme from './theme.css';

var ToastContainer = function ToastContainer(_ref) {
  var children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var classNames = cx(theme['container'], className);

  if (!children) {
    return null;
  }

  return /*#__PURE__*/React.createElement("ul", {
    className: classNames,
    style: style,
    "data-teamleader-ui": "toast-container"
  }, /*#__PURE__*/React.createElement(TransitionGroup, {
    component: "li"
  }, React.Children.map(children, function (child, index) {
    return /*#__PURE__*/React.createElement(CSSTransition, {
      timeout: 1000,
      key: index,
      classNames: {
        appear: cx(theme['appear']),
        appearActive: cx(theme['appear-active']),
        enter: cx(theme['enter']),
        enterActive: cx(theme['enter-active']),
        enterDone: cx(theme['enter-done']),
        exit: cx(theme['exit']),
        exitActive: cx(theme['exit-active']),
        exitDone: cx(theme['exit-done'])
      }
    }, child);
  })));
};

export default ToastContainer;