'use strict';

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

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

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

var _polished = require('polished');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var ModalBackground = _styledComponents2.default.div.withConfig({
  displayName: 'Modal__ModalBackground'
})(['position:absolute;top:0;left:0;width:100%;height:100%;display:', ';flex-direction:row;justify-content:center;align-items:flex-start;background-color:', ';z-index:1040;@media(min-width:768px){align-items:center;}'], function (props) {
  return props.isLast ? 'flex' : 'none';
}, function (props) {
  return (0, _polished.transparentize)(0.5, props.theme['black']);
});

var BaseModal = _styledComponents2.default.div.withConfig({
  displayName: 'Modal__BaseModal'
})(['display:', ';position:relative;width:100%;margin-top:60px;z-index:1041;background-color:', ';box-shadow:none;@media(min-width:768px){width:', ';margin-top:initial;box-shadow:0 5px 15px ', ';}'], function (props) {
  return props.isLast ? 'block' : 'none';
}, function (props) {
  return props.theme['white'];
}, function (props) {
  return props.width;
}, function (props) {
  return (0, _polished.transparentize)(0.5, props.theme['black']);
});

var selectWidth = function selectWidth(size) {
  switch (size) {
    case 'small':
      return '400px';
    case 'medium':
      return '500px';
    case 'large':
      return '600px';
    case 'xlarge':
      return '800px';
    default:
      return '1000px';
  }
};

var Modal = function Modal(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  var type = rest.type;
  var size = rest.size || 'medium';
  var position = rest.position || 1;
  var total = rest.total || 1;
  // Props above not defaulted on purpose, so we can see when we forgot to pass them.
  var width = selectWidth(size, position);
  var isLast = total === position;

  if (type === 'tray') {
    return _react2.default.createElement(
      BaseModal,
      _extends({ isLast: isLast, position: position, width: width }, rest),
      children
    );
  } else {
    return _react2.default.createElement(
      ModalBackground,
      { isLast: isLast, position: position, className: rest.class },
      _react2.default.createElement(
        BaseModal,
        _extends({ isLast: isLast, position: position, width: width }, rest),
        children
      )
    );
  }
};

Modal.propTypes = {
  position: _propTypes2.default.number.isRequired,
  total: _propTypes2.default.number.isRequired,
  size: _propTypes2.default.oneOf(['small', 'medium', 'large', 'xlarge', ''])
};

exports.default = Modal;