'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Blocker = _styledComponents2.default.div.withConfig({
  displayName: 'Modal__Blocker'
})(['background: ', ';position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;z-index: 100000;'], function (_ref) {
  var theme = _ref.theme;
  return theme.modal.blockerBG;
});

var Content = _styledComponents2.default.div.withConfig({
  displayName: 'Modal__Content'
})(['background: ', ';width: ', ';max-width: ', ';min-width: ', ';height: ', ';min-height: ', ';max-height: ', ';margin: 180px auto auto auto;display: flex;flex-direction: column;border-radius: ', ';box-shadow: ', ';'], function (_ref2) {
  var theme = _ref2.theme;
  return theme.modal.bg;
}, function (_ref3) {
  var naturalWidth = _ref3.naturalWidth;
  return naturalWidth;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.modal.maxWidth;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.modal.minWidth;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.modal.naturalHeight;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.modal.minHeight;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.modal.maxHeight;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.modal.borderRadius;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.modal.shadow;
});

var Title = _styledComponents2.default.h3.withConfig({
  displayName: 'Modal__Title'
})(['display: block;margin: 0;background: ', ';color: ', ';padding: .95em 1em .95em 1.5em;font-family: ', ';font-size: ', ';font-weight: ', ';text-transform: ', ';'], function (_ref11) {
  var theme = _ref11.theme;
  return theme.modal.titleBG;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.modal.titleFG;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.modal.titleFontFamily;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.modal.titleFontSize;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.modal.titleFontWeight;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.modal.titleTextTransform;
});

var Modal = function (_React$Component) {
  _inherits(Modal, _React$Component);

  function Modal() {
    _classCallCheck(this, Modal);

    return _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).apply(this, arguments));
  }

  _createClass(Modal, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        Blocker,
        { onClick: this.props.onBlockerClicked },
        _react2.default.createElement(
          Content,
          { naturalWidth: this.props.naturalWidth },
          this.props.title ? _react2.default.createElement(
            Title,
            null,
            this.props.title
          ) : null,
          this.props.children
        )
      );
    }
  }]);

  return Modal;
}(_react2.default.Component);

Modal.propTypes = {
  children: _propTypes2.default.node.isRequired,
  title: _propTypes2.default.string,
  onBlockerClicked: _propTypes2.default.func,
  naturalWidth: _propTypes2.default.string
};
Modal.defaultProps = {
  title: null,
  naturalWidth: 'auto',
  onBlockerClicked: function onBlockerClicked() {
    return null;
  }
};


Modal.usage = '\n# Modal\n\nUnlike traditional modal dialogs, Modal doesn\'t include functionality for closing or opening. It\'s recommended that you render Modal as a route in your React application with React Router.\n\nProvides `title` prop for adding a title, and `onBlockerClicked` if you want to hook the click event on the shadow \'blocker\' element which covers the page.\n\n```\n<Route exact path="/modal">\n  <Modal>Content <Link to="/">Close</Link></Modal>\n</Route>\n```\n';

exports.default = Modal;