'use strict';

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

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 _themeGet = require('../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _recompose = require('recompose');

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

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

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

/**
 * Horizontal is a simple layout tool that lays items out horizontally left-aligned
 * with spacing. It uses `display: flexbox;` to lay items out.
 */
var Horizontal = _styledComponents2.default.div.withConfig({
  displayName: 'Horizontal'
})(['display:flex;& > *{margin:0;}& > * + *{margin-left:', ';}'], function (_ref) {
  var spacing = _ref.spacing;
  return normalize(spacing);
});

Horizontal.defaultProps = {
  spacing: 'lg'
};

Horizontal.propTypes = {
  /**
   * The amount of space to put between items. Use xs, sm, md, lg, or xl.
   */
  spacing: _propTypes2.default.string
};
//@component
exports.default = Horizontal;