'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 _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

var _Overlay = require('./Overlay');

var _Overlay2 = _interopRequireDefault(_Overlay);

var _RenderToLayer = require('../internal/RenderToLayer');

var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

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; }

/**
 * The Modal component.
 */

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

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

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Modal).call(this, props));

    _this.handleKeyUp = function (event) {
      // When Esc is pressed
      if (event.keyCode === 27) {
        _this.requestClose(false);
      }
    };

    _this.handleCloseClick = function () {
      _this.requestClose(false);
    };

    _this.requestClose = function (buttonClicked) {
      if (!buttonClicked && _this.props.closeOnAction) {
        return;
      }

      if (_this.props.onRequestClose) {
        _this.props.onRequestClose(!!buttonClicked);
      }
    };

    _this.setKeyupListener = function () {
      if (_this.props.open) {
        window.addEventListener('keyup', _this.handleKeyUp);
      } else {
        window.removeEventListener('keyup', _this.handleKeyUp);
      }
    };

    _this.renderModal = function () {
      var cx = _bind2.default.bind(_style2.default);
      var modalOpenClass = _this.props.open ? _style2.default['modal-open'] : '';
      var modalSizeClass = _this.props.size ? _style2.default['modal-' + _this.props.size] : '';
      var modalClass = cx(_style2.default['modal-component'], _this.props.optClass, modalOpenClass);
      var modalContentClass = cx(_style2.default['modal-content'], modalSizeClass);

      var actionsContainer = _react2.default.Children.count(_this.props.actions) > 0 && _react2.default.createElement(
        'div',
        { className: _style2.default['modal-actions'] },
        _react2.default.Children.toArray(_this.props.actions)
      );

      _this.setKeyupListener();

      return _react2.default.createElement(
        'div',
        { className: modalClass },
        _react2.default.createElement(_Overlay2.default, {
          show: _this.props.open,
          onClick: _this.handleCloseClick
        }),
        _react2.default.createElement(
          'div',
          { className: modalContentClass },
          _react2.default.createElement(
            'div',
            { className: _style2.default['modal-header'] },
            !_this.props.closeOnAction ? _react2.default.createElement(
              'div',
              { className: _style2.default['modal-close'] },
              _react2.default.createElement(_Icon2.default, { name: 'icon-delete-1', width: '12', height: '12', onClick: _this.handleCloseClick })
            ) : null,
            _this.props.title ? _react2.default.createElement(
              'h1',
              null,
              _this.props.title
            ) : null
          ),
          _react2.default.createElement(
            'div',
            { className: _style2.default['modal-body'] },
            _this.props.children
          ),
          _react2.default.createElement(
            'div',
            { className: _style2.default['modal-footer'] },
            actionsContainer
          )
        )
      );
    };

    return _this;
  }

  _createClass(Modal, [{
    key: 'render',
    value: function render() {
      return(
        // Render the modal inside a div at the bottom of the document body
        _react2.default.createElement(_RenderToLayer2.default, { render: this.renderModal, open: true })
      );
    }
  }]);

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

Modal.defaultProps = {
  open: false,
  closeOnAction: false
};
Modal.propTypes = {
  /**
   * Action buttons to display below the Modal content (`children`).
   * This property accepts either a React element, or an array of React elements.
   */
  actions: _react2.default.PropTypes.node,
  /**
   * Controls whether the Modal is opened or not.
   */
  open: _react2.default.PropTypes.bool.isRequired,
  /**
   * When set to true it will force the user to use one of the actions in the `Modal`.
   * Clicking outside the `Modal` will not trigger the `onRequestClose` in that case.
   */
  closeOnAction: _react2.default.PropTypes.bool,
  /**
   * Fired when the `Modal` is requested to be closed by a click outside the `Modal` or on the buttons.
   *
   * @param {bool} buttonClicked Determines whether a button click triggered this request.
   */
  onRequestClose: _react2.default.PropTypes.func,
  /**
   * The title to display on the `Modal`. Could be number, string, element or an array containing these types.
   */
  title: _react2.default.PropTypes.node,
  /**
   * Optional styles to add to the modal.
   */
  optClass: _react2.default.PropTypes.string,
  /**
   * The size of the modal. The default is 'md' (medium).
   */
  size: _react2.default.PropTypes.oneOf(['sm', 'md', 'lg'])
};
exports.default = Modal;