"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.IconButton = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _contrast = _interopRequireDefault(require("../../utils/contrast"));

var _opacity = _interopRequireDefault(require("../../utils/opacity"));

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const IconButton = props => {
  const theme = (0, _useTheme.default)();
  const {
    groupVariant = null,
    groupSize = null,
    groupShape = null,
    groupBackgroundColor = null,
    groupHoverBackgroundColor = null,
    groupColor = null,
    color = null,
    label = null,
    children,
    icon = null,
    className = null,
    ...otherProps
  } = props; // variant for a button or a group of buttons

  const variant = props.variant ? props.variant : groupVariant ? groupVariant : "ghost"; // size for the button or group of buttons

  const size = props.size ? props.size : groupSize ? groupSize : "medium"; // shape for the button or group of buttons

  const shape = props.shape ? props.shape : groupShape ? groupShape : "round"; // background color for the button or group  of buttons

  const backgroundColor = props.backgroundColor ? props.backgroundColor : groupBackgroundColor ? groupBackgroundColor : "primary"; // hover background color for the button or group  of buttons

  const hoverBackgroundColor = props.hoverBackgroundColor ? props.hoverBackgroundColor : groupHoverBackgroundColor ? groupHoverBackgroundColor : null; // color for the button or group of buttons

  const textColor = props.color ? props.color : groupColor ? groupColor : null;

  function handleBackgroundColor() {
    switch (variant) {
      case "contained":
        return `background: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "outlined":
        return `background: ${"transparent"};`;

      case "ghost":
        return "background: transparent;";

      default:
        return "";
    }
  }

  function handleBackgroundColorHover() {
    switch (variant) {
      case "contained":
        return `background: ${hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][300] : (0, _opacity.default)(backgroundColor, 80)};`;

      case "outlined":
        return `background: ${hoverBackgroundColor ? (0, _opacity.default)(hoverBackgroundColor, 8) : (0, _isThemePalette.default)(backgroundColor) ? (0, _opacity.default)(theme.palette[backgroundColor][500], 8) : (0, _opacity.default)(backgroundColor, 8)};`;

      case "ghost":
        return `background: ${hoverBackgroundColor ? (0, _opacity.default)(hoverBackgroundColor, 8) : (0, _isThemePalette.default)(backgroundColor) ? (0, _opacity.default)(theme.palette[backgroundColor][500], 8) : (0, _opacity.default)(backgroundColor, 8)};`;

      default:
        return "";
    }
  }

  function handleDisabledColors() {
    switch (variant) {
      case "contained":
        return `background: ${(0, _opacity.default)(theme.palette.shade, 100)};
        color: ${(0, _opacity.default)(theme.palette.text, 40)};
        border-color: ${(0, _opacity.default)(theme.palette.shade, 100)};`;

      case "outlined":
        return `background: ${(0, _opacity.default)(theme.palette.shade, 100)};
        color: ${(0, _opacity.default)(theme.palette.text, 40)};
        border-color: ${(0, _opacity.default)(theme.palette.text, 40)};`;

      case "ghost":
        return `background: ${"transparent"};
        color: ${(0, _opacity.default)(theme.palette.text, 50)};
        border-color: ${"transparent"};`;

      default:
        return "";
    }
  }

  function handleBorderColor() {
    switch (variant) {
      case "contained":
        return `border-color: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "outlined":
        return `border-color: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "ghost":
        return "border-color: transparent;";

      default:
        return "";
    }
  }

  function handleBorderColorHover() {
    switch (variant) {
      case "contained":
        return `border-color: ${hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][300] : (0, _opacity.default)(backgroundColor, 80)};`;

      case "outlined":
        return `border-color: ${hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "ghost":
        return "border-color: transparent;";

      default:
        return "";
    }
  }

  function handleTextColor() {
    if (textColor) return `color: ${textColor};`; // if value is defined by props

    switch (variant) {
      case "contained":
        return `color: ${(0, _contrast.default)((0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor)};
        stroke: ${(0, _contrast.default)((0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor)};`;

      case "outlined":
        return `color: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};
        stroke: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "ghost":
        return `color: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};
        stroke: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      default:
        return "";
    }
  }

  function handleTextColorHover() {
    switch (variant) {
      case "contained":
        return `color: ${textColor ? textColor : hoverBackgroundColor ? (0, _contrast.default)((0, _isThemePalette.default)(hoverBackgroundColor) ? theme.palette[hoverBackgroundColor][500] : hoverBackgroundColor) : (0, _contrast.default)((0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor)};`;

      case "outlined":
        return `color: ${textColor ? textColor : hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "ghost":
        return `color: ${textColor ? (0, _opacity.default)(textColor, 90) : (0, _isThemePalette.default)(backgroundColor) ? (0, _opacity.default)(theme.palette[backgroundColor][500], 90) : (0, _opacity.default)(backgroundColor, 90)};`;

      default:
        return "";
    }
  }

  function handleFontSize() {
    switch (size) {
      case "xlarge":
        return "font-size: 26px;";

      case "large":
        return "font-size: 22px;";

      case "small":
        return "font-size: 14px;";

      case "mini":
        return "font-size: 10px;";

      case "medium":
      default:
        return "font-size: 18px;";
    }
  }

  function handlePadding() {
    switch (size) {
      case "xlarge":
        return "padding: 10px; ";

      case "large":
        return "padding: 8px;";

      case "small":
        return "padding: 4px;";

      case "mini":
        return "padding: 2px;";

      case "medium":
      default:
        return "padding: 6px;";
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 10em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
    "data-testid": "Wps-IconButton",
    ...otherProps,
    className: _style.default.dynamic([["3161672871", [handleBackgroundColor(), handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding(), handleBackgroundColorHover(), handleTextColorHover(), handleBorderColorHover(), handleDisabledColors()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-IconButton", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "3161672871",
      dynamic: [handleBackgroundColor(), handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding(), handleBackgroundColorHover(), handleTextColorHover(), handleBorderColorHover(), handleDisabledColors()],
      children: `.Wps-IconButton.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;box-sizing:border-box;outline:currentcolor none 0px;margin:0px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-text-decoration:none;text-decoration:none;text-align:center;border-radius:50%;overflow:visible;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;${handleBackgroundColor()} ${handleTextColor()} border-style:solid;border-width:1px;${handleBorderColor()} font-family:${theme.font.label.fontFamily};font-weight:${theme.font.label.fontWeight};line-height:${theme.font.label.lineHeight};text-transform:${theme.font.label.textTransform};${handleFontSize()} ${handleShape()} ${handlePadding()}  transition:all .5s cubic-bezier(0.4,0,0.2,1);}.Wps-IconButton.__jsx-style-dynamic-selector:hover{${handleBackgroundColorHover()} ${handleTextColorHover()} ${handleBorderColorHover()};}.Wps-IconButton.__jsx-style-dynamic-selector:disabled,.Wps-IconButton[disabled].__jsx-style-dynamic-selector{${handleDisabledColors()} cursor:not-allowed;}`
    }), children, icon]
  });
};

exports.IconButton = IconButton;