import React from 'react';
import 'react-dom';
import { c as _slicedToArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';

var ALERTBAR_TYPES = {
  DEFAULT: "default",
  SUCCESS: "success",
  WARNING: "warning",
  ERROR: "error"
};

var css_248z = ".AlertBar_alertBar__10e8R {\n  position: relative;\n  color: white;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 0;\n  height: 0;\n  opacity: 0;\n  transform: translateY(20px);\n  margin: 0px;\n  padding: 0 8px;\n  z-index: -1;\n  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);\n  -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);\n  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);\n  transition-property: transform, opacity, min-height, height;\n  transition-duration: 0.2s;\n  transition-timing-function: ease; }\n  .AlertBar_alertBar__10e8R.default {\n    background-color: #e1f0fe;\n    color: #333; }\n  .AlertBar_alertBar__10e8R.success {\n    background-color: #5fbe85; }\n  .AlertBar_alertBar__10e8R.warning {\n    background-color: #f7a857; }\n  .AlertBar_alertBar__10e8R.error {\n    background-color: #f76b6b; }\n  .AlertBar_alertBar__10e8R .AlertBar_inner__dUJ6g {\n    display: flex;\n    align-items: center; }\n    .AlertBar_alertBar__10e8R .AlertBar_inner__dUJ6g [class*=\"Icon\"] {\n      cursor: initial; }\n    .AlertBar_alertBar__10e8R .AlertBar_inner__dUJ6g .AlertBar_message__3kys6 {\n      font-size: 15px;\n      padding: 10px 15px 10px 5px; }\n  .AlertBar_alertBar__10e8R.AlertBar_active__1Ft4p {\n    height: auto;\n    min-height: 30px;\n    transform: translateY(0px);\n    opacity: 1;\n    margin: 12px 0;\n    z-index: 1; }\n  .AlertBar_alertBarError__1-Bmu svg g {\n    fill: white; }\n  .AlertBar_alertBarError__1-Bmu svg circle {\n    stroke: transparent; }\n  .AlertBar_alertBarWarning__1Urlo svg g {\n    fill: #fff;\n    stroke: #f7a857; }\n  .AlertBar_alertBarWarning__1Urlo svg path {\n    fill: #f7a857; }\n  .AlertBar_alertBarWarning__1Urlo svg circle {\n    stroke: transparent; }\n  .AlertBar_alertBarSuccess__iFe-C svg g {\n    fill: #fff; }\n  .AlertBar_alertBarSuccess__iFe-C svg circle {\n    stroke: transparent; }\n";
var styles = {"alertBar":"AlertBar_alertBar__10e8R","inner":"AlertBar_inner__dUJ6g","message":"AlertBar_message__3kys6","active":"AlertBar_active__1Ft4p","alertBarError":"AlertBar_alertBarError__1-Bmu","alertBarWarning":"AlertBar_alertBarWarning__1Urlo","alertBarSuccess":"AlertBar_alertBarSuccess__iFe-C"};
styleInject(css_248z);

var AlertBar = function AlertBar(_ref) {
  var _ref$prefixClassName = _ref.prefixClassName,
    prefixClassName = _ref$prefixClassName === void 0 ? "" : _ref$prefixClassName,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    type = _ref.type,
    _ref$message = _ref.message,
    message = _ref$message === void 0 ? "" : _ref$message,
    active = _ref.active,
    onDismiss = _ref.onDismiss,
    alwaysActive = _ref.alwaysActive,
    noIcon = _ref.noIcon,
    customIcon = _ref.customIcon;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isActive = _React$useState2[0],
    setIsActive = _React$useState2[1];
  React.useEffect(function () {
    setIsActive(active || alwaysActive);
  }, [active || alwaysActive]);
  var handleOnDismiss = React.useCallback(function () {
    setIsActive(false);
    onDismiss();
  }, []);
  var renderIcon = React.useCallback(function () {
    if (noIcon) return null;
    var iconPath = "";
    var className = "";
    if (customIcon) {
      iconPath = customIcon;
    } else if (type === ALERTBAR_TYPES.SUCCESS) {
      iconPath = "tick";
      className = "".concat(styles.alertBarSuccess);
    } else if (type === ALERTBAR_TYPES.DEFAULT) {
      iconPath = "infoV2";
    } else {
      iconPath = "error_response";
      className = type === ALERTBAR_TYPES.WARNING ? "".concat(styles.alertBarWarning) : "".concat(styles.alertBarError);
    }
    return /*#__PURE__*/React.createElement(Icon, {
      className: "".concat(className, " ").concat(prefixClassName, "-alertbar-icon"),
      prefixClassName: prefixClassName,
      src: iconPath
    });
  }, [noIcon, type, customIcon, prefixClassName]);
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "AlertBar",
    className: "\n            ".concat(styles.alertBar, "\n            ").concat(className, "\n            ").concat(type, "\n            ").concat(isActive ? styles.active : styles.inactive)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.inner, " ").concat(prefixClassName, "-inner")
  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.message, " ").concat(prefixClassName, "-inner-message")
  }, message)), !alwaysActive && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixClassName, "-dismiss"),
    onClick: handleOnDismiss
  }, /*#__PURE__*/React.createElement(Icon, {
    src: "closeV2",
    className: "".concat(prefixClassName, "-dismiss-icon")
  })));
};
AlertBar.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 alert bar (default/success/warning/error) */
  type: PropTypes.string,
  /** The message/content which will be displayed within the alert bar */
  message: PropTypes.node,
  /** Determines if alert bar is visible */
  active: PropTypes.bool,
  /** Function which will be called when dismissing the alert bar.
   * A required prop when driving from parent.
   */
  onDismiss: PropTypes.func,
  /** If set to 'true',
   * the bar won't be dismissed it will always be shown. */
  alwaysActive: PropTypes.bool,
  /** Decides if the icon before the message is to be visible or not.
   *  'active' prop is not needed
   */
  noIcon: PropTypes.bool,
  /** Adds a custom icon before the message,
   * accepts the name to the icon (Refer Icon docs for names)  */
  customIcon: PropTypes.string
};
AlertBar.defaultProps = {
  prefixClassName: "",
  className: "",
  type: "default",
  message: "",
  onDismiss: function onDismiss() {},
  active: false,
  alwaysActive: false,
  noIcon: false,
  customIcon: ""
};
AlertBar.classNames = {
  $prefix: "Outermost element",
  "$prefix-inner": "Child of the Main Alert Bar Component",
  "$prefix-inner-message": "Message of the alert bar",
  "$prefix-alertbar-icon": "Attaches to outer container of the icon",
  "$prefix-dismiss": "Dismiss container",
  "$prefix-dismiss-icon": "Dismiss icon for message"
};
AlertBar.TYPES = _objectSpread2({}, ALERTBAR_TYPES);
AlertBar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "AlertBar",
  "props": {
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "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"
    },
    "message": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "The message/content which will be displayed within the alert bar"
    },
    "type": {
      "defaultValue": {
        "value": "\"default\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The type of the alert bar (default/success/warning/error)"
    },
    "onDismiss": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Function which will be called when dismissing the alert bar.\nA required prop when driving from parent."
    },
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Determines if alert bar is visible"
    },
    "alwaysActive": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If set to 'true',\nthe bar won't be dismissed it will always be shown."
    },
    "noIcon": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Decides if the icon before the message is to be visible or not.\n 'active' prop is not needed"
    },
    "customIcon": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Adds a custom icon before the message,\naccepts the name to the icon (Refer Icon docs for names)"
    }
  }
};

export default AlertBar;
