"use strict";

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

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

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

var _react = _interopRequireWildcard(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");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * Primary UI component for user interaction
 */
const WuiButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const theme = (0, _useTheme.default)();
  const {
    chip = false,
    active = null,
    disabled = false,
    groupVariant = null,
    groupSize = null,
    groupShape = null,
    groupBackgroundColor = null,
    groupHoverBackgroundColor = null,
    groupColor = null,
    groupHoverColor = null,
    label = null,
    children,
    icon = null,
    startIcon = null,
    endIcon = null,
    fullWidth = false,
    align = "center",
    color = null,
    hoverColor = null,
    className = null,
    ...otherProps
  } = props; // variant for a button or a group of buttons

  const variant = props.variant ? props.variant : groupVariant ? groupVariant : "contained"; // 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; // color for the button or group of buttons on hover

  const hoverTextColor = props.hoverColor ? props.hoverColor : groupHoverColor ? groupHoverColor : null; // function handleBackgroundColor() {
  //   switch (variant) {
  //     case "contained":
  //       return `background: ${
  //         isThemePalette(backgroundColor)
  //           ? theme.palette[backgroundColor][500]
  //           : backgroundColor
  //       };`;
  //     case "outlined":
  //       return `background: ${"transparent"};`;
  //     case "ghost":
  //       return "background: transparent;";
  //     default:
  //       return "";
  //   }
  // }

  const handleBackgroundColor = (0, _react.useMemo)(() => {
    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 "";
    }
  }, [variant, backgroundColor, theme.palette]);

  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)};
        stroke: ${(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)};
        stroke: ${(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)};
        stroke: ${(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() {
    switch (variant) {
      case "contained":
        return textColor ? `color: ${(0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor};
            stroke: ${(0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor};` : `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 textColor ? `color: ${(0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor};
            stroke: ${(0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor};` : `color: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};
            stroke: ${(0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

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

      default:
        return "";
    }
  }

  function handleTextColorHover() {
    if (hoverTextColor) return `color: ${hoverTextColor}; stroke: ${hoverTextColor};`; // if value is defined by props

    switch (variant) {
      case "contained":
        return `color: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : 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)};
        stroke: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : 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: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor : hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};
        stroke: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor : hoverBackgroundColor ? hoverBackgroundColor : (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor};`;

      case "ghost":
        return `color: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _opacity.default)((0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : textColor, 90) : (0, _isThemePalette.default)(backgroundColor) ? (0, _opacity.default)(theme.palette[backgroundColor][500], 90) : (0, _opacity.default)(backgroundColor, 90)};
        stroke: ${hoverTextColor ? (0, _isThemePalette.default)(hoverTextColor) ? theme.palette[hoverTextColor][500] : hoverTextColor : textColor ? (0, _opacity.default)((0, _isThemePalette.default)(textColor) ? theme.palette[textColor][500] : 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: 18px;";

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

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

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

      case "medium":
      default:
        return "font-size: 14px;";
    }
  } // function handlePadding() {
  //   switch (size) {
  //     case "xlarge":
  //       return "padding: 12px 16px; ";
  //     case "large":
  //       return "padding: 10px 14px;";
  //     case "small":
  //       return "padding: 6px 8px;";
  //     case "mini":
  //       return "padding: 4px 6px;";
  //     case "medium":
  //     default:
  //       return "padding: 8px 10px;";
  //   }
  // }


  const handlePadding = (0, _react.useMemo)(() => {
    switch (size) {
      case "xlarge":
        return "padding: 12px 16px; ";

      case "large":
        return "padding: 10px 14px;";

      case "small":
        return "padding: 6px 8px;";

      case "mini":
        return "padding: 4px 6px;";

      case "medium":
      default:
        return "padding: 8px 10px;";
    }
  }, [size]);

  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;";
    }
  }

  function handleAlign() {
    switch (align) {
      case "left":
        return "justify-content: flex-start;";

      case "right":
        return "justify-content: flex-end;";

      case "spaced":
        return "justify-content: space-between;";

      case "center":
      default:
        return "justify-content: center;";
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
    "data-testid": "Wps-Button",
    disabled: disabled,
    ref: ref,
    ...otherProps,
    className: _style.default.dynamic([["884021911", [handleBackgroundColor, handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding, !chip ? "cursor: pointer;" : "", handleAlign(), fullWidth ? "100%" : "max-content", !chip && handleBackgroundColorHover(), !chip && handleTextColorHover(), !chip && handleBorderColorHover(), handleDisabledColors(), disabled ? "not-allowed" : "pointer"]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-Button", active !== null ? active ? "active" : "disabled" : "", className) || ""),
    children: [startIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingRight: 5
      },
      className: _style.default.dynamic([["884021911", [handleBackgroundColor, handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding, !chip ? "cursor: pointer;" : "", handleAlign(), fullWidth ? "100%" : "max-content", !chip && handleBackgroundColorHover(), !chip && handleTextColorHover(), !chip && handleBorderColorHover(), handleDisabledColors(), disabled ? "not-allowed" : "pointer"]]]),
      children: startIcon
    }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {},
      className: _style.default.dynamic([["884021911", [handleBackgroundColor, handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding, !chip ? "cursor: pointer;" : "", handleAlign(), fullWidth ? "100%" : "max-content", !chip && handleBackgroundColorHover(), !chip && handleTextColorHover(), !chip && handleBorderColorHover(), handleDisabledColors(), disabled ? "not-allowed" : "pointer"]]]),
      children: icon
    }), label, children, endIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingLeft: 5
      },
      className: _style.default.dynamic([["884021911", [handleBackgroundColor, handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding, !chip ? "cursor: pointer;" : "", handleAlign(), fullWidth ? "100%" : "max-content", !chip && handleBackgroundColorHover(), !chip && handleTextColorHover(), !chip && handleBorderColorHover(), handleDisabledColors(), disabled ? "not-allowed" : "pointer"]]]),
      children: endIcon
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "884021911",
      dynamic: [handleBackgroundColor, handleTextColor(), handleBorderColor(), theme.font.label.fontFamily, theme.font.label.fontWeight, theme.font.label.lineHeight, theme.font.label.textTransform, handleFontSize(), handleShape(), handlePadding, !chip ? "cursor: pointer;" : "", handleAlign(), fullWidth ? "100%" : "max-content", !chip && handleBackgroundColorHover(), !chip && handleTextColorHover(), !chip && handleBorderColorHover(), handleDisabledColors(), disabled ? "not-allowed" : "pointer"],
      children: `.Wps-Button.__jsx-style-dynamic-selector{${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} position:relative;${!chip ? "cursor: pointer;" : ""} overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${handleAlign()} height:fit-content;width:${fullWidth ? "100%" : "max-content"};-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;}.Wps-Button.__jsx-style-dynamic-selector:hover,.Wps-Button.active.__jsx-style-dynamic-selector{${!chip && handleBackgroundColorHover()} ${!chip && handleTextColorHover()} ${!chip && handleBorderColorHover()};}.Wps-Button.__jsx-style-dynamic-selector:disabled,.Wps-Button[disabled].__jsx-style-dynamic-selector{${handleDisabledColors()} cursor:${disabled ? "not-allowed" : "pointer"};}`
    })]
  });
});

const Button = /*#__PURE__*/_react.default.memo(WuiButton);

exports.Button = Button;