'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var normalize = function normalize(size) {
  if (!size) {
    return 'medium';
  }

  switch (size) {
    case 'xs':
    case 'extraSmall':
      return 'extraSmall';
    case 'sm':
    case 'small':
      return 'small';
    case 'lg':
    case 'large':
      return 'large';
    case 'xl':
    case 'extraLarge':
      return 'extraLarge';
    case 'md':
    case 'medium':
      return 'medium';
    default:
      return size;
  }
};

var getPadding = function getPadding(theme, size) {
  if (theme.padding[normalize(size)]) {
    return theme.padding[normalize(size)];
  }

  return size;
};

var Padding = _styledComponents2.default.div.withConfig({
  displayName: 'Padding__Padding'
})(['', '', '', '', '', ''], function (_ref) {
  var size = _ref.size,
      theme = _ref.theme;
  return 'padding: ' + getPadding(theme, size) + ';';
}, function (_ref2) {
  var top = _ref2.top,
      theme = _ref2.theme;
  return top ? 'padding-top: ' + getPadding(theme, top) + ';' : '';
}, function (_ref3) {
  var bottom = _ref3.bottom,
      theme = _ref3.theme;
  return bottom ? 'padding-bottom: ' + getPadding(theme, bottom) + ';' : '';
}, function (_ref4) {
  var left = _ref4.left,
      theme = _ref4.theme;
  return left ? 'padding-left: ' + getPadding(theme, left) + ';' : '';
}, function (_ref5) {
  var right = _ref5.right,
      theme = _ref5.theme;
  return right ? 'padding-right: ' + getPadding(theme, right) + ';' : '';
});

Padding.propTypes = {
  size: _propTypes2.default.string,
  top: _propTypes2.default.string,
  bottom: _propTypes2.default.string,
  left: _propTypes2.default.string,
  right: _propTypes2.default.string
};

Padding.defaultProps = {
  size: 'md',
  top: null,
  bottom: null,
  left: null,
  right: null
};

Padding.usage = '\n# Padding\n\nAn experimental component which just adds some padding around something else, based on some pre-defined sizes our designers like. Since developers end up implementing their own padding a lot, it might be useful to include this generic utility. Hopefully it generalizes well.\n\nYou can also specify a custom padding for any side, i.e. `top="48px"`. This is probably a bad idea.\n\n```\n<Padding size="sm" bottom="lg">Some content</Padding>\n```\n';

exports.default = Padding;