"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getColor = getColor;
exports.Root = exports.Text = 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 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 ($theme && $theme.colors[_constants.COLOR_STYLE_KEYS[$kind]]) {
    return $theme.colors[_constants.COLOR_STYLE_KEYS[$kind]];
  }

  return $color;
}

function getAlpha(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

  if (hovered) {
    return '0.8';
  }

  return '0.92';
}

function getActionAlpha(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var secondary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  var $clickable = props.$clickable,
      _props$$variant = props.$variant,
      $variant = _props$$variant === void 0 ? _constants.VARIANT.light : _props$$variant;

  if ($variant === _constants.VARIANT.solid && !$clickable && hovered && secondary) {
    return '0.24';
  }

  if (hovered) {
    return '0.6';
  }

  return '0.92';
}

function getBackgroundColor(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var $color = props.$color,
      $kind = props.$kind,
      $variant = props.$variant,
      $theme = props.$theme;

  if ($variant === _constants.VARIANT.outlined) {
    return $theme.colors.tagBackground;
  }

  var color = getColor($theme, $kind, $color);

  if ($variant === _constants.VARIANT.solid && !hovered) {
    return color;
  }

  var alpha = getAlpha(props, hovered);
  return "linear-gradient(0deg, \n    rgba(".concat($theme.colors.tagRGBGradient, ", ").concat(alpha, "), \n    rgba(").concat($theme.colors.tagRGBGradient, ", ").concat(alpha, ")), \n    ").concat(color);
}

function getBorderColor(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var $color = props.$color,
      $clickable = props.$clickable,
      $kind = props.$kind,
      $variant = props.$variant,
      $theme = props.$theme;

  if ($variant !== _constants.VARIANT.outlined) {
    return 'transparent';
  }

  var color = getColor($theme, $kind, $color);
  return (0, _index.hexToRgb)(color, $clickable && hovered ? '0.6' : '1');
}

function getBorderWidth(props) {
  var $variant = props.$variant;

  if ($variant === _constants.VARIANT.outlined) {
    return '2px';
  }

  return '0';
}

function getActionBackgroundColor(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var $color = props.$color,
      $clickable = props.$clickable,
      $kind = props.$kind,
      $variant = props.$variant,
      $theme = props.$theme;
  var color = getColor($theme, $kind, $color);

  if (!hovered) {
    return 'transparent';
  }

  if ($variant === _constants.VARIANT.outlined) {
    return getBorderColor(props, hovered);
  }

  var alpha;

  if ($variant === _constants.VARIANT.solid && !$clickable && hovered) {
    alpha = getActionAlpha(props, hovered, true);
    return "linear-gradient(0deg, \n      rgba(".concat($theme.colors.tagRGBGradientSecondary, ", ").concat(alpha, "), \n      rgba(").concat($theme.colors.tagRGBGradientSecondary, ", ").concat(alpha, ")), \n      ").concat(color);
  }

  alpha = getActionAlpha(props, hovered);
  return "linear-gradient(0deg, \n    rgba(".concat($theme.colors.tagRGBGradient, ", ").concat(alpha, "), \n    rgba(").concat($theme.colors.tagRGBGradient, ", ").concat(alpha, ")), \n    ").concat(color);
}

function getActionFontColor(props) {
  var hovered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var $variant = props.$variant,
      $theme = props.$theme;

  if (hovered && $variant === _constants.VARIANT.outlined && $theme) {
    return $theme.colors.mono200;
  }

  return null;
}

function getFontColor(props, hovered) {
  var $theme = props.$theme,
      _props$$kind = props.$kind,
      $kind = _props$$kind === void 0 ? _constants.KIND.primary : _props$$kind,
      _props$$color = props.$color,
      $color = _props$$color === void 0 ? '#000' : _props$$color,
      _props$$variant2 = props.$variant,
      $variant = _props$$variant2 === void 0 ? _constants.VARIANT.light : _props$$variant2;

  if ($variant === _constants.VARIANT.solid && !hovered) {
    return $theme.colors.mono200;
  }

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

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

var Action = (0, _index.styled)('span', function (props) {
  var $disabled = props.$disabled,
      $variant = props.$variant,
      $theme = props.$theme;
  var hoverStyles = $disabled ? {} : {
    background: getActionBackgroundColor(props, true),
    color: getActionFontColor(props, true)
  };
  return {
    alignItems: 'center',
    borderBottomRightRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    borderTopRightRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    cursor: $disabled ? 'not-allowed' : 'pointer',
    display: 'flex',
    marginLeft: '8px',
    outline: 'none',
    paddingTop: $variant === _constants.VARIANT.outlined ? '5px' : '7px',
    paddingBottom: $variant === _constants.VARIANT.outlined ? '5px' : '7px',
    paddingLeft: '8px',
    paddingRight: '8px',
    transitionProperty: 'all',
    transitionDuration: $theme.animation.timing100,
    transitionTimingFunction: $theme.animation.easeOutCurve,
    ':hover': hoverStyles,
    ':focus': hoverStyles
  };
});
exports.Action = Action;
Action.displayName = "Action";
var ActionIcon = (0, _index.styled)('svg', function () {
  return {};
});
exports.ActionIcon = ActionIcon;
ActionIcon.displayName = "ActionIcon";
var Text = (0, _index.styled)('span', function (props) {
  return {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    maxWidth: props.$theme.sizing.scale3200
  };
});
exports.Text = Text;
Text.displayName = "Text";
var Root = (0, _index.styled)('span', function (props) {
  var $disabled = props.$disabled,
      $theme = props.$theme,
      $closeable = props.$closeable,
      $clickable = props.$clickable;
  var _$theme$sizing = $theme.sizing,
      scale0 = _$theme$sizing.scale0,
      scale800 = _$theme$sizing.scale800,
      scale500 = _$theme$sizing.scale500,
      font250 = $theme.typography.font250;
  var paddingRightIfNotCloseable = $closeable ? {} : {
    paddingRight: scale500
  };
  var hoverStyles = $disabled || $clickable === false ? {} : {
    background: getBackgroundColor(props, true),
    borderColor: getBorderColor(props, true),
    color: getFontColor(props, true)
  };
  return _objectSpread({}, font250, paddingRightIfNotCloseable, {
    alignItems: 'center',
    background: getBackgroundColor(props),
    borderColor: getBorderColor(props),
    borderStyle: 'solid',
    borderWidth: getBorderWidth(props),
    borderRadius: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : '0px',
    boxSizing: 'border-box',
    color: getFontColor(props),
    cursor: $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
    display: 'inline-flex',
    height: scale800,
    justifyContent: 'space-between',
    marginTop: '5px',
    marginBottom: '5px',
    marginLeft: '5px',
    marginRight: '5px',
    paddingTop: scale0,
    paddingBottom: scale0,
    paddingLeft: scale500,
    opacity: $disabled ? '.56' : null,
    outline: 'none',
    transitionProperty: 'backgroundColor, borderColor',
    transitionDuration: $theme.animation.timing100,
    transitionTimingFunction: $theme.animation.easeOutCurve,
    ':hover': hoverStyles,
    ':focus': hoverStyles
  });
});
exports.Root = Root;
Root.displayName = "Root";