import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["alignment", "direction", "color", "full", "noShadow", "children", "className"];
import * as React from 'react';
import classNames from 'classnames';
export var ALIGNMENT = {
  START: 'start',
  CENTER: 'center',
  END: 'end'
};
export var DIRECTION = {
  LEFT: 'left',
  RIGHT: 'right',
  TOP: 'top',
  BOTTOM: 'bottom'
};
var HORIZONTAL_DIRECTIONS = [DIRECTION.LEFT, DIRECTION.RIGHT];
export var BUBBLE_COLOR = {
  white: 'white',
  'gray-40': 'gray-40',
  'gray-20': 'gray-20',
  'blue-40': 'blue-40',
  'blue-30': 'blue-30',
  'blue-20': 'blue-20',
  'indigo-40': 'indigo-40',
  'green-40': 'green-40',
  'green-30': 'green-30',
  'green-20': 'green-20',
  'red-40': 'red-40'
};

var Bubble = function Bubble(_ref) {
  var _classNames;

  var _ref$alignment = _ref.alignment,
      alignment = _ref$alignment === void 0 ? ALIGNMENT.CENTER : _ref$alignment,
      direction = _ref.direction,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? BUBBLE_COLOR.white : _ref$color,
      full = _ref.full,
      noShadow = _ref.noShadow,
      children = _ref.children,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, _excluded);

  var alignmentClass;

  if (HORIZONTAL_DIRECTIONS.includes(direction)) {
    alignmentClass = "sg-bubble--column-".concat(alignment);
  } else {
    alignmentClass = "sg-bubble--row-".concat(alignment);
  }

  var bubbleClass = classNames('sg-bubble', (_classNames = {
    'sg-bubble--full': full,
    'sg-bubble--no-shadow': noShadow
  }, _defineProperty(_classNames, "sg-bubble--".concat(String(color)), color), _defineProperty(_classNames, "sg-bubble--".concat(direction), direction), _defineProperty(_classNames, alignmentClass, alignment !== ALIGNMENT.CENTER), _classNames), className);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: bubbleClass
  }), children);
};

export default Bubble;