import React, { PureComponent } from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Overlay from '../overlay/Overlay';
import Transition from 'react-transition-group/Transition';
import theme from './theme.css';

class Dialog extends PureComponent {
  static propTypes = {
    /** If true, the dialog will show on screen. */
    active: PropTypes.bool,
    /** Specify which backdrop the dialog should show. */
    backdrop: PropTypes.string,
    /** The content to display inside the dialog. */
    children: PropTypes.node,
    /** A class name for the wrapper to give custom styles. */
    className: PropTypes.string,
    /** Callback function that is fired when the escape key is pressed. */
    onEscKeyDown: PropTypes.func,
    /** Callback function that is fired when the mouse clicks on the overlay. */
    onOverlayClick: PropTypes.func,
    /** Callback function that is fired when the mouse button is pressed on the overlay. */
    onOverlayMouseDown: PropTypes.func,
    /** Callback function that is fired when the mouse moves over the overlay. */
    onOverlayMouseMove: PropTypes.func,
    /** Callback function that is fired when the mouse button is released from the overlay. */
    onOverlayMouseUp: PropTypes.func,
    /** The size of the dialog. */
    size: PropTypes.oneOf(['small', 'medium', 'large', 'fullscreen']),
  };

  static defaultProps = {
    active: false,
    backdrop: 'dark',
    size: 'medium',
  };

  constructor() {
    super(...arguments);

    this.dialogRoot = document.createElement('div');
    this.dialogRoot.id = 'dialog-root';
  }

  componentDidMount() {
    document.body.appendChild(this.dialogRoot);
  }

  componentWillUnmount() {
    document.body.removeChild(this.dialogRoot);
  }

  render() {
    const {
      active,
      backdrop,
      children,
      className,
      onEscKeyDown,
      onOverlayClick,
      onOverlayMouseDown,
      onOverlayMouseMove,
      onOverlayMouseUp,
      size,
    } = this.props;

    if (!active) {
      return null;
    }

    const dialogClassNames = cx(theme['dialog'], theme[`is-${size}`], className);

    const dialog = (
      <Transition timeout={0} in={active} appear>
        {state => {
          return (
            <div
              className={cx(theme['wrapper'], {
                [theme['is-entering']]: state === 'entering',
                [theme['is-entered']]: state === 'entered',
              })}
            >
              <Overlay
                active={active}
                backdrop={backdrop}
                className={theme['overlay']}
                onClick={onOverlayClick}
                onEscKeyDown={onEscKeyDown}
                onMouseDown={onOverlayMouseDown}
                onMouseMove={onOverlayMouseMove}
                onMouseUp={onOverlayMouseUp}
              />
              <div data-teamleader-ui="dialog" className={dialogClassNames}>
                <div className={theme['inner']}>{children}</div>
              </div>
            </div>
          );
        }}
      </Transition>
    );

    return createPortal(dialog, this.dialogRoot);
  }
}

export default Dialog;

@@ -323,1198 +323,8 @@
 t %7B%0A
-  static propTypes = %7B%0A    /** If true, the dialog will show on screen. */%0A    active: PropTypes.bool,%0A    /** Specify which backdrop the dialog should show. */%0A    backdrop: PropTypes.string,%0A    /** The content to display inside the dialog. */%0A    children: PropTypes.node,%0A    /** A class name for the wrapper to give custom styles. */%0A    className: PropTypes.string,%0A    /** Callback function that is fired when the escape key is pressed. */%0A    onEscKeyDown: PropTypes.func,%0A    /** Callback function that is fired when the mouse clicks on the overlay. */%0A    onOverlayClick: PropTypes.func,%0A    /** Callback function that is fired when the mouse button is pressed on the overlay. */%0A    onOverlayMouseDown: PropTypes.func,%0A    /** Callback function that is fired when the mouse moves over the overlay. */%0A    onOverlayMouseMove: PropTypes.func,%0A    /** Callback function that is fired when the mouse button is released from the overlay. */%0A    onOverlayMouseUp: PropTypes.func,%0A    /** The size of the dialog. */%0A    size: PropTypes.oneOf(%5B'small', 'medium', 'large', 'fullscreen'%5D),%0A  %7D;%0A%0A  static defaultProps = %7B%0A    active: false,%0A    backdrop: 'dark',%0A    size: 'medium',%0A  %7D;%0A%0A
   co
@@ -1986,16 +1986,1152 @@
 %0A  %7D%0A%7D%0A%0A
+Dialog.propTypes = %7B%0A  /** If true, the dialog will show on screen. */%0A  active: PropTypes.bool,%0A  /** Specify which backdrop the dialog should show. */%0A  backdrop: PropTypes.string,%0A  /** The content to display inside the dialog. */%0A  children: PropTypes.node,%0A  /** A class name for the wrapper to give custom styles. */%0A  className: PropTypes.string,%0A  /** Callback function that is fired when the escape key is pressed. */%0A  onEscKeyDown: PropTypes.func,%0A  /** Callback function that is fired when the mouse clicks on the overlay. */%0A  onOverlayClick: PropTypes.func,%0A  /** Callback function that is fired when the mouse button is pressed on the overlay. */%0A  onOverlayMouseDown: PropTypes.func,%0A  /** Callback function that is fired when the mouse moves over the overlay. */%0A  onOverlayMouseMove: PropTypes.func,%0A  /** Callback function that is fired when the mouse button is released from the overlay. */%0A  onOverlayMouseUp: PropTypes.func,%0A  /** The size of the dialog. */%0A  size: PropTypes.oneOf(%5B'small', 'medium', 'large', 'fullscreen'%5D),%0A%7D;%0A%0ADialog.defaultProps = %7B%0A  active: false,%0A  backdrop: 'dark',%0A  size: 'medium',%0A%7D;%0A%0A
 export d

move static propTypes & defaultProps outside of the component class