import { css } from 'styled-components';
import Color from 'color';
import { units } from '../../../../common/unitUtils';
var HEIGHT = {
  s: 6,
  m: 8,
  l: 10
};
var PADDING_HORIZONTAL_ROUNDED_CORNERS = {
  s: 4,
  m: 5,
  l: 6
};
var PADDING_VERTICAL_ROUNDED_CORNERS = {
  s: 1,
  m: 2,
  l: 2
};
var BORDER_SIZE = 2;
var shared = css(["position:relative;box-sizing:border-box;align-items:center;justify-content:center;", ""], function (p) {
  return p.$fullWidth ? "display: flex; width: 100%;" : "display: inline-flex;";
});
var minHeight = css(["min-height:", ";"], function (p) {
  return "".concat(p.theme.spacing.unit(HEIGHT[p.$size]), "px");
});
var getPadding = function getPadding(size) {
  var horizontalPadding = units(PADDING_HORIZONTAL_ROUNDED_CORNERS[size]);
  var verticalPadding = units(PADDING_VERTICAL_ROUNDED_CORNERS[size]);
  return css(["padding:calc(", "px - ", "px) calc(", "px - ", "px);"], verticalPadding, BORDER_SIZE, horizontalPadding, BORDER_SIZE);
};
var padding = css(["", ""], function (p) {
  return getPadding(p.$size);
});
export var primaryStyles = css(["", " ", " ", " background-color:", ";color:", ";border:", "px solid transparent;border-radius:", ";", ""], shared, padding, minHeight, function (p) {
  var customColor = p.$colorFn && p.$colorFn(p.theme);
  var background = customColor || p.theme.color.buttonBackgroundPrimary;
  return p.disabled ? p.theme.color.buttonBackgroundDisabled : background;
}, function (p) {
  return p.disabled ? p.theme.color.buttonTextDisabled : p.theme.color.buttonText;
}, BORDER_SIZE, function (p) {
  return p.theme.borderRadius100;
}, function (p) {
  var customColor = p.$colorFn && p.$colorFn(p.theme);
  var background = customColor || p.theme.color.buttonBackgroundPrimary;
  return p.disabled ? '' : "\n    &:hover {\n      background-color: ".concat(customColor ? Color(background).darken(0.1) : p.theme.color.buttonBackgroundHoverPrimary, ";\n    }\n    &:active {\n      background-color: ").concat(customColor ? Color(background).darken(0.2) : p.theme.color.buttonBackgroundActivePrimary, ";\n    }\n  ");
});
export var negativeStyles = css(["", " ", " ", " background-color:", ";color:", ";border:", "px solid transparent;border-radius:", ";", ""], shared, padding, minHeight, function (p) {
  var background = p.theme.color.buttonBackgroundNegative;
  return p.disabled ? p.theme.color.buttonBackgroundDisabled : background;
}, function (p) {
  return p.disabled ? p.theme.color.buttonTextDisabled : p.theme.color.buttonText;
}, BORDER_SIZE, function (p) {
  return p.theme.borderRadius100;
}, function (p) {
  return p.disabled ? '' : "\n    &:hover {\n      background-color: ".concat(p.theme.color.buttonBackgroundNegativeHover, ";\n    }\n    &:active {\n      background-color: ").concat(p.theme.color.buttonBackgroundNegativeActive, ";\n    }\n  ");
});
export var secondaryStyles = css(["", " ", " ", " background-color:", ";border:", "px solid ", ";border-radius:", ";", ";"], shared, padding, minHeight, function (p) {
  return p.disabled ? p.theme.color.buttonBackgroundDisabled : 'transparent';
}, BORDER_SIZE, function (p) {
  return p.disabled ? 'transparent' : p.theme.color.buttonBorderSecondary;
}, function (p) {
  return p.theme.borderRadius100;
}, function (p) {
  var customColor = p.$colorFn && p.$colorFn(p.theme);
  var color = customColor || p.theme.color.buttonTextSecondary;
  var hoverTextColor = function () {
    if (customColor) {
      return Color(color).darken(0.2);
    }
    if (p.theme.isDarkMode) {
      return color;
    }
    return p.theme.color.buttonHoverSecondary;
  }();
  var activeTextColor = function () {
    if (customColor) {
      return Color(color).darken(0.3);
    }
    if (p.theme.isDarkMode) {
      return color;
    }
    return p.theme.color.buttonActiveSecondary;
  }();
  return css(["color:", ";", ""], p.disabled ? p.theme.color.buttonTextDisabled : color, p.disabled ? '' : "\n        &:hover {\n          color: ".concat(hoverTextColor, ";\n          border-color: ").concat(customColor ? Color(color).darken(0.2) : p.theme.color.buttonHoverSecondary, ";\n        }\n\n        &:active {\n          color: ").concat(activeTextColor, ";\n          border-color: ").concat(customColor ? Color(color).darken(0.3) : p.theme.color.buttonActiveSecondary, ";\n        }\n      "));
});
export var neutralStyles = css(["", ";padding:0;background-color:transparent;border:none;", ";"], shared, function (p) {
  var color = p.theme.isDarkMode ? p.$colorFn && p.$colorFn(p.theme) || p.theme.color.buttonTextLight : p.$colorFn && p.$colorFn(p.theme) || p.theme.color.text;
  return "\n      color: ".concat(p.disabled ? p.theme.color.disabledText : color, "\n    ");
});