function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { HotKeys } from 'react-hotkeys';
import styled from 'styled-components';
import v from '../../config/variables';
const ModalOverlay = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  z-index: 500;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: ${props => props.showBackdrop && props.backdropBackground};
  opacity: ${props => props.visible ? 1 : 0};
  pointer-events: ${props => props.visible ? 'all' : 'none'};

  &:hover {
    outline: 0;
  }
`;
ModalOverlay.displayName = 'ModalOverlay';
const ModalContent = styled.div`
  position: relative;
  background: ${v.theme.white};
  border-radius: ${v.base.radiusSmall}px;
  padding: ${v.base.gutter}px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: ${props => () => {
  if (props.size === 'large') return '800px';
  if (props.size === 'small') return '300px';
  return '450px';
}}
`;
ModalContent.displayName = 'ModalContent';

class Modal extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "_handleRequestToClose", () => {
      const {
        cancellable,
        onRequestToClose
      } = this.props;
      cancellable && onRequestToClose && onRequestToClose();
    });

    _defineProperty(this, "_handleContentPress", e => e.stopPropagation());
  }

  get keysActions() {
    return {
      requestToClose: this.props.closeKeys
    };
  }

  get keysHandlers() {
    return {
      requestToClose: () => this._handleRequestToClose()
    };
  }

  render() {
    const autofocus = el => el && el.parentNode.focus();

    return ReactDOM.createPortal(React.createElement(ModalOverlay, _extends({
      innerRef: autofocus,
      onClick: this._handleRequestToClose
    }, this.props), React.createElement(HotKeys, {
      keyMap: this.keysActions,
      handlers: this.keysHandlers
    }, React.createElement(ModalContent, _extends({}, this.props, {
      onClick: this._handleContentPress
    }), this.props.children))), document.body);
  }

}

_defineProperty(Modal, "propTypes", {
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  visible: PropTypes.bool,
  closeKeys: PropTypes.arrayOf(PropTypes.string),
  onRequestToClose: PropTypes.func,
  cancellable: PropTypes.bool,
  showBackdrop: PropTypes.bool,
  backdropBackground: PropTypes.string
});

_defineProperty(Modal, "defaultProps", {
  size: 'medium',
  children: null,
  visible: false,
  closeKeys: ['esc'],
  onRequestToClose: null,
  cancellable: true,
  showBackdrop: true,
  backdropBackground: 'rgba(0, 0, 0, 0.5)'
});

export default Modal;