import React from 'react';
import 'react-dom';
import { a as _objectSpread2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from './icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-91504e81.js';
import { r as rgba } from '../generic-2d73c3aa.js';

var css = ".Button_buttonContainer__1Xxil {\n  display: inline-block;\n  position: relative; }\n\n.Button_button__3x-pt {\n  outline: none;\n  border: none;\n  background-color: #fff;\n  border: 1px solid #ddd;\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  transition: 0.2s ease-out;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .Button_button__3x-pt.Button_small__WrDri {\n    font-size: 10px; }\n  .Button_button__3x-pt.Button_primary__2mPmh {\n    color: #fff; }\n  .Button_button__3x-pt.Button_grey__3dPxO {\n    background-color: #f2f2f2;\n    border-color: #dddddd; }\n  .Button_button__3x-pt:hover {\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n    transform: translateY(-2px); }\n  .Button_button__3x-pt:active {\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    transform: translateY(-1px); }\n  .Button_button__3x-pt.Button_disabled__sbjEC {\n    background-color: #f2f2f2;\n    cursor: not-allowed;\n    border-color: #dddddd; }\n    .Button_button__3x-pt.Button_disabled__sbjEC:hover {\n      box-shadow: none;\n      transform: none; }\n  .Button_button__3x-pt.Button_big__356Du {\n    font-size: 14px; }\n  .Button_button__3x-pt.Button_warning__G0Ead {\n    background-color: rgba(244, 67, 54, 0.1);\n    color: #f44336;\n    border-color: #f44336; }\n    .Button_button__3x-pt.Button_warning__G0Ead:hover {\n      background-color: rgba(244, 67, 54, 0.2);\n      color: #ea1c0d; }\n  .Button_button__3x-pt.Button_yellow__3iR1i {\n    background-color: rgba(241, 196, 15, 0.1);\n    color: #c29d0b;\n    border-color: #f1c40f; }\n    .Button_button__3x-pt.Button_yellow__3iR1i:hover {\n      background-color: rgba(241, 196, 15, 0.2);\n      color: #927608; }\n\n.Button_secondaryIcon__3lV3g {\n  position: absolute;\n  right: -10px;\n  top: 14px;\n  cursor: pointer; }\n";
var styles = {"buttonContainer":"Button_buttonContainer__1Xxil","button":"Button_button__3x-pt","small":"Button_small__WrDri","primary":"Button_primary__2mPmh","grey":"Button_grey__3dPxO","disabled":"Button_disabled__sbjEC","big":"Button_big__356Du","warning":"Button_warning__G0Ead","yellow":"Button_yellow__3iR1i","secondaryIcon":"Button_secondaryIcon__3lV3g"};
styleInject(css);

var ButtonColor = variant({
  scale: "buttonColors",
  variants: {}
});
var ButtonSize = variant({
  prop: "size",
  scale: "buttonSizes",
  variants: {
    small: {},
    regular: {},
    large: {}
  }
}); // Non customizable CSS props

var style = function style(props) {
  return {
    appearance: "button",
    outline: 0,
    transition: "box-shadow 0.3s ease",
    "&:hover": {
      cursor: "pointer",
      boxShadow: props.theme.shadows.md
    },
    "&:active": {
      boxShadow: props.theme.shadows.sm
    }
  };
};

var ThemedButton = styled("button")(style, space, color, border, typography, ButtonColor, ButtonSize); // Customizable CSS props

ThemedButton.defaultProps = {
  borderRadius: "sm",
  borderWidth: 0,
  borderStyle: "solid",
  margin: "xs",
  paddingY: "sm",
  paddingX: "md",
  variant: "primary",
  size: "medium",
  fontWeight: "semiBold",
  fontFamily: "\"Proxima Nova\", sans-serif"
};

/**
 * Button component. Renders a button
 * based on type and size. Uses the children prop
 * to render the contents of the button.
 */

var Button = function Button(props) {
  if (props.themed) {
    var buttonProps = _objectSpread2({}, props, {
      ref: props.innerRef,
      "data-testid": "themedButton"
    });

    return React.createElement(ThemedButton, buttonProps, props.children);
  }

  var _props$prefixClassNam = props.prefixClassName,
      prefixClassName = _props$prefixClassNam === void 0 ? "" : _props$prefixClassNam,
      _props$className = props.className,
      className = _props$className === void 0 ? "" : _props$className,
      type = props.type,
      size = props.size,
      disabled = props.disabled,
      onClick = props.onClick,
      innerRef = props.innerRef,
      children = props.children,
      secondaryIcon = props.secondaryIcon,
      onSecondaryIconClick = props.onSecondaryIconClick;

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;
  /**
   * Get the styles classname corresponding to the type prop
   * @returns {string} classname of the type styles to be applied
   */


  var getTypeClassName = React.useCallback(function () {
    switch (type) {
      case Button.TYPES.PRIMARY:
        return styles.primary;

      case Button.TYPES.SECONDARY:
        return styles.secondary;

      case Button.TYPES.OUTLINE:
        return styles.outline;

      case Button.TYPES.GREY:
        return styles.grey;

      case Button.TYPES.WARNING:
        return styles.warning;

      case Button.TYPES.YELLOW:
        return styles.yellow;

      default:
        return "";
    }
  });
  /**
   * Get the styles corresponding to the type prop
   * @returns {object} the styles object to be applied
   */

  var getColorStyles = React.useCallback(function () {
    switch (type) {
      case Button.TYPES.PRIMARY:
        return {
          backgroundColor: primaryColor,
          borderColor: primaryColor
        };

      case Button.TYPES.OUTLINE:
        return {
          color: primaryColor,
          borderColor: primaryColor,
          backgroundColor: rgba(primaryColor, 0.1)
        };

      default:
        return {};
    }
  });
  /**
   * Get the styles classname corresponding to the size prop
   * @returns {string} classname of the size styles to be applied
   */

  var getSizeClassName = React.useCallback(function () {
    switch (size) {
      case Button.SIZES.BIG:
        return styles.big;

      case Button.SIZES.MEDIUM:
        return styles.medium;

      case Button.SIZES.SMALL:
        return styles.small;

      default:
        return styles.medium;
    }
  });
  var getDisabledClassName = React.useCallback(function () {
    return disabled ? styles.disabled : "";
  });

  var renderButton = function renderButton() {
    return React.createElement("button", {
      "data-testid": "button",
      type: "button",
      disabled: disabled,
      ref: innerRef,
      onClick: onClick,
      style: !disabled ? getColorStyles() : undefined,
      className: "\n          ".concat(styles.button, "\n          ").concat(prefixClassName, "\n          ").concat(className, "\n          ").concat(getDisabledClassName(), "\n          ").concat(getTypeClassName(), "\n          ").concat(getSizeClassName(), "\n        ")
    }, children);
  };

  return !secondaryIcon ? renderButton() : React.createElement("div", {
    className: styles.buttonContainer
  }, renderButton(), React.createElement("span", {
    "data-testid": "secondry-icon",
    className: styles.secondaryIcon,
    onClick: onSecondaryIconClick
  }, React.createElement(Icon, {
    src: secondaryIcon
  })));
};

Button.SIZES = {
  SMALL: "small",
  MEDIUM: "medium",
  BIG: "big"
};
Button.TYPES = {
  DEFAULT: "default",
  PRIMARY: "primary",
  SECONDARY: "secondary",
  OUTLINE: "outline",
  GREY: "grey",
  WARNING: "warning",
  YELLOW: "yellow"
};
Button.propTypes = {
  /** The classname to be prefixed on the outermost element */
  prefixClassName: PropTypes.string,

  /** The classname to appended to the outermost element */
  className: PropTypes.string,

  /** The type of the button (primary, secondary, grey etc.) */
  type: PropTypes.oneOf([Button.TYPES.DEFAULT, Button.TYPES.PRIMARY, Button.TYPES.SECONDARY, Button.TYPES.OUTLINE, Button.TYPES.GREY, Button.TYPES.WARNING, Button.TYPES.YELLOW]),

  /** The size of the button (small/medium/big) */
  size: PropTypes.oneOf([Button.SIZES.SMALL, Button.SIZES.MEDIUM, Button.SIZES.BIG]),

  /** Whether the button is disabled */
  disabled: PropTypes.bool,

  /** OnClick callback */
  onClick: PropTypes.func,

  /** The ref passed down to the outermost DOM element */
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.instanceOf(Element)
  })]),

  /** Children to render inside the button */
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]).isRequired,

  /** String identifier for the icon supported by relements <Icon /> or a react node. Optional. */
  secondaryIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),

  /** secondary icon onClick callback */
  onSecondaryIconClick: PropTypes.func,
  themed: PropTypes.bool
};
Button.defaultProps = {
  prefixClassName: "relements-button",
  className: "",
  type: Button.TYPES.DEFAULT,
  size: Button.SIZES.MEDIUM,
  disabled: false,
  onClick: function onClick() {},
  onSecondaryIconClick: function onSecondaryIconClick() {},
  themed: false
};
Button.classNames = {
  $prefix: "Outermost element",
  "$prefix-child": "Child of the Main Button Component"
};
Button.__docgenInfo = {
  "description": "Button component. Renders a button\nbased on type and size. Uses the children prop\nto render the contents of the button.",
  "methods": [],
  "displayName": "Button",
  "props": {
    "prefixClassName": {
      "defaultValue": {
        "value": "\"relements-button\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be prefixed on the outermost element"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "type": {
      "defaultValue": {
        "value": "Button.TYPES.DEFAULT",
        "computed": true
      },
      "type": {
        "name": "enum",
        "value": [{
          "value": "Button.TYPES.DEFAULT",
          "computed": true
        }, {
          "value": "Button.TYPES.PRIMARY",
          "computed": true
        }, {
          "value": "Button.TYPES.SECONDARY",
          "computed": true
        }, {
          "value": "Button.TYPES.OUTLINE",
          "computed": true
        }, {
          "value": "Button.TYPES.GREY",
          "computed": true
        }, {
          "value": "Button.TYPES.WARNING",
          "computed": true
        }, {
          "value": "Button.TYPES.YELLOW",
          "computed": true
        }]
      },
      "required": false,
      "description": "The type of the button (primary, secondary, grey etc.)"
    },
    "size": {
      "defaultValue": {
        "value": "Button.SIZES.MEDIUM",
        "computed": true
      },
      "type": {
        "name": "enum",
        "value": [{
          "value": "Button.SIZES.SMALL",
          "computed": true
        }, {
          "value": "Button.SIZES.MEDIUM",
          "computed": true
        }, {
          "value": "Button.SIZES.BIG",
          "computed": true
        }]
      },
      "required": false,
      "description": "The size of the button (small/medium/big)"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the button is disabled"
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "OnClick callback"
    },
    "onSecondaryIconClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "secondary icon onClick callback"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "type": {
        "name": "union",
        "value": [{
          "name": "func"
        }, {
          "name": "shape",
          "value": {
            "current": {
              "name": "instanceOf",
              "value": "Element",
              "required": false
            }
          }
        }]
      },
      "required": false,
      "description": "The ref passed down to the outermost DOM element"
    },
    "children": {
      "type": {
        "name": "union",
        "value": [{
          "name": "element"
        }, {
          "name": "string"
        }, {
          "name": "number"
        }]
      },
      "required": true,
      "description": "Children to render inside the button"
    },
    "secondaryIcon": {
      "type": {
        "name": "union",
        "value": [{
          "name": "object"
        }, {
          "name": "string"
        }]
      },
      "required": false,
      "description": "String identifier for the icon supported by relements <Icon /> or a react node. Optional."
    }
  }
};

export default Button;
