var _ROLE$badge, _ROLE$notificationCir, _ROLE$hintDot, _Object$freeze;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles';
import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants'; // @ts-ignore

function getColorStyles(_ref) {
  var _HIERARCHY$primary, _HIERARCHY$secondary, _COLOR_STYLES;

  var $theme = _ref.$theme,
      $hierarchy = _ref.$hierarchy,
      $color = _ref.$color;
  var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, COLOR.accent, {
    color: $theme.colors.contentOnColor,
    backgroundColor: $theme.colors.backgroundAccent
  }), _defineProperty(_HIERARCHY$primary, COLOR.primary, {
    color: $theme.colors.contentInversePrimary,
    backgroundColor: $theme.colors.backgroundInversePrimary
  }), _defineProperty(_HIERARCHY$primary, COLOR.positive, {
    color: $theme.colors.contentOnColor,
    backgroundColor: $theme.colors.backgroundPositive
  }), _defineProperty(_HIERARCHY$primary, COLOR.negative, {
    color: $theme.colors.contentOnColor,
    backgroundColor: $theme.colors.backgroundNegative
  }), _defineProperty(_HIERARCHY$primary, COLOR.warning, {
    color: $theme.colors.contentOnColorInverse,
    backgroundColor: $theme.colors.backgroundWarning
  }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, COLOR.accent, {
    color: $theme.colors.contentAccent,
    backgroundColor: $theme.colors.backgroundAccentLight
  }), _defineProperty(_HIERARCHY$secondary, COLOR.primary, {
    color: $theme.colors.contentPrimary,
    backgroundColor: $theme.colors.backgroundSecondary
  }), _defineProperty(_HIERARCHY$secondary, COLOR.positive, {
    color: $theme.colors.contentPositive,
    backgroundColor: $theme.colors.backgroundPositiveLight
  }), _defineProperty(_HIERARCHY$secondary, COLOR.negative, {
    color: $theme.colors.contentNegative,
    backgroundColor: $theme.colors.backgroundNegativeLight
  }), _defineProperty(_HIERARCHY$secondary, COLOR.warning, {
    color: $theme.colors.contentWarning,
    backgroundColor: $theme.colors.backgroundWarningLight
  }), _HIERARCHY$secondary)), _COLOR_STYLES); // @ts-ignore

  return COLOR_STYLES[$hierarchy][$color];
}

var DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT = {
  top: '-10px',
  right: '-10px'
};
var DEFAULT_HINT_DOT_PLACEMENT = {
  top: '-4px',
  right: '-4px'
};
var POSITION_STYLES = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, ROLE.badge, (_ROLE$badge = {}, _defineProperty(_ROLE$badge, PLACEMENT.topEdge, {
  top: '-8px',
  left: '50%',
  transform: 'translateX(-50%)'
}), _defineProperty(_ROLE$badge, PLACEMENT.bottomEdge, {
  bottom: '-8px',
  left: '50%',
  transform: 'translateX(-50%)'
}), _defineProperty(_ROLE$badge, PLACEMENT.topLeft, {
  top: '16px',
  left: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.topRight, {
  top: '16px',
  right: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.bottomRight, {
  bottom: '16px',
  right: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.bottomLeft, {
  bottom: '16px',
  left: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.topLeftEdge, {
  top: '-8px',
  left: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.topRightEdge, {
  top: '-8px',
  right: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.bottomRightEdge, {
  bottom: '-8px',
  right: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.bottomLeftEdge, {
  bottom: '-8px',
  left: '16px'
}), _defineProperty(_ROLE$badge, PLACEMENT.leftTopEdge, {
  top: '16px',
  left: '-8px'
}), _defineProperty(_ROLE$badge, PLACEMENT.rightTopEdge, {
  top: '16px',
  right: '-8px'
}), _defineProperty(_ROLE$badge, PLACEMENT.rightBottomEdge, {
  bottom: '16px',
  right: '-8px'
}), _defineProperty(_ROLE$badge, PLACEMENT.leftBottomEdge, {
  bottom: '16px',
  left: '-8px'
}), _ROLE$badge)), _defineProperty(_Object$freeze, ROLE.notificationCircle, (_ROLE$notificationCir = {}, _defineProperty(_ROLE$notificationCir, PLACEMENT.topLeft, {
  top: '-10px',
  left: '-10px'
}), _defineProperty(_ROLE$notificationCir, PLACEMENT.topRight, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.topEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.bottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.bottomRight, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.bottomLeft, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.topLeftEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.topRightEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.bottomRightEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.bottomLeftEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.leftTopEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.rightTopEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.rightBottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, PLACEMENT.leftBottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _ROLE$notificationCir)), _defineProperty(_Object$freeze, ROLE.hintDot, (_ROLE$hintDot = {}, _defineProperty(_ROLE$hintDot, PLACEMENT.topLeft, {
  top: '-4px',
  left: '-4px'
}), _defineProperty(_ROLE$hintDot, PLACEMENT.topRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.topEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.bottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.bottomRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.bottomLeft, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.topLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.topRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.bottomRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.bottomLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.leftTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.rightTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.rightBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, PLACEMENT.leftBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _ROLE$hintDot)), _Object$freeze));
export var StyledRoot = styled('div', function () {
  return {
    position: 'relative',
    display: 'inline-block',
    lineHeight: 'initial'
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
var TOP_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.topRightEdge, PLACEMENT.leftTopEdge, PLACEMENT.rightTopEdge];
var BOTTOM_PLACEMENTS = [PLACEMENT.bottomLeft, PLACEMENT.bottomRight, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.bottomRightEdge, PLACEMENT.leftBottomEdge, PLACEMENT.rightBottomEdge];
var LEFT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.bottomLeft, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.leftTopEdge, PLACEMENT.leftBottomEdge];
var RIGHT_PLACEMENTS = [PLACEMENT.topRight, PLACEMENT.topRightEdge, PLACEMENT.bottomRight, PLACEMENT.bottomRightEdge, PLACEMENT.rightTopEdge, PLACEMENT.rightBottomEdge];
export var StyledPositioner = styled('div', function (_ref2) {
  var $theme = _ref2.$theme,
      $role = _ref2.$role,
      $placement = _ref2.$placement,
      $horizontalOffset = _ref2.$horizontalOffset,
      $verticalOffset = _ref2.$verticalOffset;
  var positionStyle = POSITION_STYLES[$role][$placement];

  if ($verticalOffset) {
    if (TOP_PLACEMENTS.includes($placement)) {
      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
        top: $verticalOffset
      });
    }

    if (BOTTOM_PLACEMENTS.includes($placement)) {
      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
        bottom: $verticalOffset
      });
    }
  }

  if ($horizontalOffset) {
    if (LEFT_PLACEMENTS.includes($placement)) {
      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
        left: $horizontalOffset
      });
    }

    if (RIGHT_PLACEMENTS.includes($placement)) {
      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
        right: $horizontalOffset
      });
    }
  }

  return _objectSpread(_objectSpread({}, positionStyle), {}, {
    position: 'absolute',
    lineHeight: 'initial'
  });
});
StyledPositioner.displayName = "StyledPositioner";
StyledPositioner.displayName = 'StyledPositioner';
export var StyledBadge = styled('div', function (_ref3) {
  var $theme = _ref3.$theme,
      _ref3$$shape = _ref3.$shape,
      $shape = _ref3$$shape === void 0 ? SHAPE.rectangle : _ref3$$shape,
      _ref3$$color = _ref3.$color,
      $color = _ref3$$color === void 0 ? COLOR.accent : _ref3$$color,
      _ref3$$hierarchy = _ref3.$hierarchy,
      $hierarchy = _ref3$$hierarchy === void 0 ? HIERARCHY.primary : _ref3$$hierarchy,
      $hidden = _ref3.$hidden;
  return _objectSpread(_objectSpread({
    visibility: $hidden ? 'hidden' : 'inherit',
    boxSizing: 'border-box',
    height: $theme.sizing.scale700,
    borderRadius: $shape === SHAPE.rectangle ? $theme.borders.radius200 : $theme.borders.radius500,
    paddingRight: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
    paddingLeft: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
    display: 'inline-flex',
    alignItems: 'center'
  }, getColorStyles({
    $theme: $theme,
    $hierarchy: $hierarchy,
    $color: $color
  })), $hierarchy === HIERARCHY.primary ? $theme.typography.LabelSmall : $theme.typography.ParagraphSmall);
});
StyledBadge.displayName = "StyledBadge";
StyledBadge.displayName = 'StyledBadge';
export var StyledNotificationCircle = styled('div', function (_ref4) {
  var $theme = _ref4.$theme,
      _ref4$$color = _ref4.$color,
      $color = _ref4$$color === void 0 ? COLOR.accent : _ref4$$color,
      $hidden = _ref4.$hidden;
  return _objectSpread(_objectSpread({
    visibility: $hidden ? 'hidden' : 'inherit',
    height: $theme.sizing.scale700,
    width: $theme.sizing.scale700,
    borderRadius: '20px',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center'
  }, getColorStyles({
    $theme: $theme,
    $hierarchy: HIERARCHY.primary,
    $color: $color
  })), $theme.typography.LabelXSmall);
});
StyledNotificationCircle.displayName = "StyledNotificationCircle";
StyledNotificationCircle.displayName = 'StyledNotificationCircle';
export var StyledHintDot = styled('div', function (_ref5) {
  var $theme = _ref5.$theme,
      _ref5$$color = _ref5.$color,
      $color = _ref5$$color === void 0 ? COLOR.accent : _ref5$$color,
      $hidden = _ref5.$hidden;
  return _objectSpread({
    visibility: $hidden ? 'hidden' : 'inherit',
    // @ts-ignore
    backgroundColor: $theme.colors[$color],
    boxSizing: 'content-box',
    height: '8px',
    width: '8px',
    borderRadius: '50%',
    border: "4px solid ".concat($theme.colors.backgroundPrimary)
  }, getColorStyles({
    $theme: $theme,
    $hierarchy: HIERARCHY.primary,
    $color: $color
  }));
});
StyledHintDot.displayName = "StyledHintDot";
StyledHintDot.displayName = 'StyledHintDot';