"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getBackgroundColor = getBackgroundColor;
exports.getColor = getColor;
exports.getHoverBackgroundColor = getHoverBackgroundColor;
exports.Root = exports.ActionIcon = exports.Action = void 0;

var _constants = require("./constants.js");

var _index = require("../styles/index.js");

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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; }

function getBackgroundColor(props) {
  var $color = props.$color,
      $isActive = props.$isActive,
      $isFocused = props.$isFocused,
      $kind = props.$kind,
      $theme = props.$theme;
  var color = getColor($theme, $kind, $color);
  return (0, _index.hexToRgb)(color, $isFocused || $isActive ? '0.2' : '0.06');
}

function getColor($theme) {
  var $kind = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.COLOR_STYLE_KEYS.primary;
  var $color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#000';

  if ($kind === 'custom') {
    return $color;
  }

  if ($theme && $theme.colors && $theme.colors[_constants.COLOR_STYLE_KEYS[$kind]]) {
    return $theme.colors[_constants.COLOR_STYLE_KEYS[$kind]];
  }
}

function getHoverBackgroundColor(props) {
  var $color = props.$color,
      $disabled = props.$disabled,
      $kind = props.$kind,
      $theme = props.$theme;
  var color = getColor($theme, $kind, $color);
  return $disabled ? null : (0, _index.hexToRgb)(color, '0.2');
}

var Action = (0, _index.styled)('span', function (props) {
  var $disabled = props.$disabled,
      $theme = props.$theme;
  return {
    display: 'flex',
    alignItems: 'center',
    paddingTop: '8px',
    paddingBottom: '8px',
    paddingLeft: '8px',
    paddingRight: '8px',
    borderBottomRightRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    borderTopRightRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    marginLeft: '8px',
    cursor: $disabled ? 'not-allowed' : 'pointer',
    ':hover': {
      backgroundColor: getBackgroundColor(props)
    }
  };
});
exports.Action = Action;
Action.displayName = "Action";
var ActionIcon = (0, _index.styled)('svg', function () {
  return {};
});
exports.ActionIcon = ActionIcon;
ActionIcon.displayName = "ActionIcon";
var Root = (0, _index.styled)('span', function (props) {
  var $color = props.$color,
      $disabled = props.$disabled,
      $kind = props.$kind,
      $theme = props.$theme;
  var _$theme$sizing = $theme.sizing,
      scale800 = _$theme$sizing.scale800,
      scale100 = _$theme$sizing.scale100,
      scale500 = _$theme$sizing.scale500,
      font250 = $theme.typography.font250;
  var color = getColor($theme, $kind, $color);
  var paddingRightIfNotCloseable = props.$closeable ? {} : {
    paddingRight: scale500
  };
  return _objectSpread({}, font250, paddingRightIfNotCloseable, {
    display: 'inline-flex',
    height: scale800,
    marginTop: '5px',
    marginBottom: '5px',
    marginLeft: '5px',
    marginRight: '5px',
    boxSizing: 'border-box',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: scale100,
    paddingBottom: scale100,
    paddingLeft: scale500,
    borderWidth: '1px',
    borderColor: color,
    color: color,
    opacity: $disabled ? '.56' : null,
    borderRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    cursor: $disabled ? 'not-allowed' : 'auto',
    backgroundColor: getBackgroundColor(props),
    ':hover': {
      backgroundColor: getHoverBackgroundColor(props)
    }
  });
});
exports.Root = Root;
Root.displayName = "Root";