var _excluded = ["groupFirst", "groupLast", "groupMiddle"];
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import styled, { css } from "styled-components";
import { lighten, darken } from "polished";
import { getColor as themeGetColor, getSizeBy, DefaultTheme, DarkTheme } from "../../theme";
import margin from "../../mixins/margin";
import padding from "../../mixins/padding";
import round from "../../mixins/round";
import alignSelf from "../../mixins/alignSelf";
import textTransform from "../../mixins/textTransform";
import position from "../../mixins/position";
import { position as styledSystemPosition } from "styled-system";
import { DEFAULT, HOLLOW, BORDER_LESS } from "./constants";
var themes = {
  light: DefaultTheme,
  dark: DarkTheme
};
var activeStyles = css(["border-color:", ";background-color:", ";color:", ";box-shadow:inset 0 4px 4px rgba(0,0,0,0.25);"], function (props) {
  return props.colors.borderActive(props);
}, function (props) {
  return props.colors.bgActive(props);
}, function (props) {
  return props.colors.colorActive(props);
});
var withTheme = function withTheme(props) {
  if (props.themeType) {
    return _extends({}, props, {
      theme: themes[props.themeType]
    });
  }
  return _extends({}, props, {
    theme: props.theme
  });
};
var getColor = function getColor(name) {
  return function (props) {
    var _props$colorPalette;
    var prop = (props == null || (_props$colorPalette = props.colorPalette) == null ? void 0 : _props$colorPalette[name]) || name;
    return themeGetColor(prop)(props);
  };
};
var getPrimaryColor = function getPrimaryColor(props) {
  return props.neutral ? getColor(props.flavour === HOLLOW ? "textFocus" : "neutralPillColor")(props) : getColor("primary")(props);
};
var getBorderColor = function getBorderColor(props) {
  return props.neutral ? getColor("generic")(props) : getColor("primary")(props);
};
var getTextColor = function getTextColor(props) {
  return props.neutral ? getColor(props.flavour === HOLLOW ? "text" : "mainBackground")(props) : getColor(props.flavour === HOLLOW ? "secondaryColor" : "mainBackground")(props);
};
var getHoverColor = function getHoverColor(props) {
  return props.neutral ? getColor("generic")(props) : getColor("accent")(props);
};
var getAccentColor = function getAccentColor(props) {
  if (props.neutral) return getColor(props.flavour === BORDER_LESS ? "textFocus" : "neutralHighlight")(props);
  var errorColor = props.danger ? "error" : undefined;
  var errorBgColor = props.danger ? "errorSemi" : undefined;
  var warningColor = props.warning ? "warning" : undefined;
  var warningBgColor = props.warning ? "warningSemi" : undefined;
  var primaryColor = errorColor || warningColor || "primaryHighlight";
  var secondaryHollow = errorBgColor || warningBgColor || "secondaryHighlight";
  return getColor(props.flavour === HOLLOW ? secondaryHollow : primaryColor)(props);
};
var getTransparent = getColor(["transparent", "full"]);
var colorsByFlavour = function colorsByFlavour(_ref) {
  var _flavours;
  var _ref$flavour = _ref.flavour,
    flavour = _ref$flavour === void 0 ? DEFAULT : _ref$flavour,
    danger = _ref.danger,
    warning = _ref.warning,
    iconColor = _ref.iconColor,
    color = _ref.color;
  var getErrorColor = danger ? getColor("error") : undefined;
  var getWarningColor = warning ? getColor("warning") : undefined;
  var getSpecialColor = getErrorColor || getWarningColor || (color ? getColor(color) : undefined);
  var getSpecialColorHover = getSpecialColor ? function (props) {
    return lighten(0.2, getSpecialColor(props));
  } : undefined;
  var getSpecialColorActive = getSpecialColor ? function (props) {
    return darken(0.2, getSpecialColor(props));
  } : undefined;
  var specialIconColor = iconColor ? getColor(iconColor) : undefined;
  var flavours = (_flavours = {}, _flavours[DEFAULT] = {
    color: getTextColor,
    colorHover: getTextColor,
    colorActive: getTextColor,
    bg: getSpecialColor || getPrimaryColor,
    bgHover: getSpecialColorHover || getHoverColor,
    bgActive: getSpecialColorActive || getAccentColor,
    border: getSpecialColor || getPrimaryColor,
    borderHover: getSpecialColorHover || getHoverColor,
    borderActive: getSpecialColorActive || getAccentColor,
    iconColor: specialIconColor || getTextColor
  }, _flavours[HOLLOW] = {
    color: getSpecialColor || getTextColor,
    colorHover: getSpecialColorHover || getTextColor,
    colorActive: getSpecialColorActive || getTextColor,
    bg: getTransparent,
    bgHover: getAccentColor,
    bgActive: getAccentColor,
    border: getSpecialColor || getBorderColor,
    borderHover: getSpecialColorHover || getPrimaryColor,
    borderActive: getSpecialColorActive || getPrimaryColor,
    iconColor: specialIconColor || getSpecialColor || getPrimaryColor
  }, _flavours[BORDER_LESS] = {
    color: getSpecialColor || getPrimaryColor,
    colorHover: getSpecialColorHover || getAccentColor,
    colorActive: getSpecialColorActive || getAccentColor,
    bg: getTransparent,
    bgHover: getTransparent,
    bgActive: getTransparent,
    border: getTransparent,
    borderHover: getTransparent,
    borderActive: getTransparent,
    iconColor: specialIconColor || getSpecialColor || getPrimaryColor
  }, _flavours);
  return flavours[flavour] || flavours[DEFAULT];
};
export var StyledButton = styled.button.attrs(function (_ref2) {
  var groupFirst = _ref2.groupFirst,
    groupLast = _ref2.groupLast,
    groupMiddle = _ref2.groupMiddle,
    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
  return _extends({
    padding: props.large ? !props.hasLabel ? [1.5, 3] : [1.5, 4] : !props.hasLabel ? [1, 1.5] : [1, 3],
    colors: colorsByFlavour(props),
    round: groupFirst ? {
      side: "left",
      size: 0.5
    } : groupLast ? {
      side: "right",
      size: 0.5
    } : groupMiddle ? false : 0.5
  }, withTheme(props));
}).withConfig({
  displayName: "styled__StyledButton",
  componentId: "sc-14wh25s-0"
})(["&&{display:flex;justify-content:center;align-items:center;position:relative;", ";font-weight:", ";font-size:", ";white-space:nowrap;word-break:keep-all;cursor:pointer;", " pointer-events:", ";", " ", " transition:all 150ms;background-color:", ";color:", ";border-width:1px;border-style:solid;border-color:", ";", " box-sizing:border-box;", " ", " text-decoration:none;& > span{", ";margin-left:", ";}&:hover{border-color:", ";background-color:", ";color:", ";text-decoration:none;.button-icon{fill:", ";}}&:active{", "}", " &:focus{outline:none;}.button-icon{height:", ";width:", ";fill:", ";}.ntd-spinner{fill:none;stroke-width:17px;stroke-dasharray:100;stroke-dashoffset:100;animation:ntd-draw 1s linear infinite;stroke:", ";width:24px;}.path{stroke:", ";}@keyframes ntd-draw{to{stroke-dashoffset:0;}}}"], alignSelf, function (_ref3) {
  var strong = _ref3.strong;
  return strong ? 700 : 500;
}, function (_ref4) {
  var large = _ref4.large;
  return large ? "16px" : "12px";
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled && "opacity: 0.4;";
}, function (_ref6) {
  var disabled = _ref6.disabled;
  return disabled ? "none" : "auto";
}, margin, padding, function (props) {
  return props.colors.bg(props);
}, function (props) {
  return props.colors.color(props);
}, function (props) {
  return props.colors.border(props);
}, round, position, styledSystemPosition, textTransform, function (_ref7) {
  var hasIcon = _ref7.hasIcon;
  return hasIcon ? "4px" : "0px";
}, function (props) {
  return props.colors.borderHover(props);
}, function (props) {
  return props.colors.bgHover(props);
}, function (props) {
  return props.colors.colorHover(props);
}, function (props) {
  return props.colors.colorHover(props);
}, activeStyles, function (props) {
  return props.active && "\n      " + activeStyles + "\n    ";
}, function (props) {
  return props.iconWidth ? typeof props.iconWidth === "string" ? props.iconWidth : props.iconWidth + "px" : getSizeBy(1.75)(props);
}, function (props) {
  return props.iconHeight ? typeof props.iconHeight === "string" ? props.iconHeight : props.iconHeight + "px" : getSizeBy(1.75)(props);
}, function (props) {
  return props.colors.iconColor(props);
}, function (props) {
  return props.colors.color(props);
}, function (props) {
  return props.colors.color(props);
});