import React from 'react';
import 'react-dom';
import { c as _slicedToArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.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 Icon from '../ui/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 '../index-91504e81.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import '../index-9efc6429.js';
import '../generic-2d73c3aa.js';
import Button from '../ui/button.js';
import LoadingComponent from '../ui/loader.js';
import '../useInput-33ea83d6.js';
import '../ui/label.js';
import '../TextInput-023a1470.js';
import Text from './text.js';

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

var css = ".ExpandableInputBar_expandableInputBar__3fJKr {\n  position: relative;\n  max-width: 330px;\n  width: fit-content;\n  transition: all 0.3s ease; }\n  .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 {\n    display: flex;\n    align-items: center; }\n    .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu {\n      display: none;\n      position: relative; }\n      .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_dismissIcon___bIRp {\n        position: absolute;\n        top: 7px;\n        right: 7px;\n        width: 17px;\n        height: 17px; }\n      .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_inputText__3s_aD .ExpandableInputBar_searchBarText__3SPtx-label {\n        display: none; }\n      .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_inputText__3s_aD .ExpandableInputBar_searchBarText__3SPtx-textinput {\n        padding: 0px;\n        border: 0px;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px; }\n    .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_actionButton__1H82r {\n      height: 32px;\n      max-width: 100px;\n      margin: auto 0px 0px; }\n    .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_loader__yT3EG {\n      position: absolute;\n      top: 9px;\n      right: 12px; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc {\n    width: 100%; }\n    .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu {\n      display: block;\n      width: 100%;\n      animation: ExpandableInputBar_slideLeft__2gcbo 0.3s ease; }\n      .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_dismissIcon___bIRp {\n        display: block; }\n      .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_searchBarText__3SPtx-textinput {\n        padding: 0 30px 0 8px !important;\n        border: 1px solid #ddd !important;\n        border-right: 0px !important; }\n    .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_actionButton__1H82r {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n      width: 100%; }\n    .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc.ExpandableInputBar_hasLabel__3PhHO .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_dismissIcon___bIRp {\n      top: 32px !important; }\n    .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc.ExpandableInputBar_hasLabel__3PhHO .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_searchBarText__3SPtx-label {\n      display: block !important; }\n    .ExpandableInputBar_expandableInputBar__3fJKr.ExpandableInputBar_active__19lDc.ExpandableInputBar_hasLabel__3PhHO .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_loader__yT3EG {\n      top: 34px !important; }\n  .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_message__2WrfR {\n    font-size: 12px;\n    position: absolute;\n    bottom: -22px;\n    left: 3px; }\n  .ExpandableInputBar_expandableInputBar__3fJKr .ExpandableInputBar_hidden__10rPt {\n    display: none !important; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.success .ExpandableInputBar_message__2WrfR {\n    color: #5fbe85; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.warning .ExpandableInputBar_message__2WrfR {\n    color: #f7a857; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.error .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_textContent__1GZlu .ExpandableInputBar_inputText__3s_aD .ExpandableInputBar_searchBarText__3SPtx-textinput {\n    border: 1px solid #f76b6b !important;\n    border-right: 0px !important; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.error .ExpandableInputBar_inner__9rOA4 .ExpandableInputBar_actionButton__1H82r {\n    border: 1px solid #f76b6b !important; }\n  .ExpandableInputBar_expandableInputBar__3fJKr.error .ExpandableInputBar_message__2WrfR {\n    color: #f76b6b; }\n\n@keyframes ExpandableInputBar_slideLeft__2gcbo {\n  0% {\n    opacity: 0;\n    transform: translateX(100px); }\n  100% {\n    opacity: 1;\n    transform: translateX(0); } }\n";
var styles = {"expandableInputBar":"ExpandableInputBar_expandableInputBar__3fJKr","inner":"ExpandableInputBar_inner__9rOA4","textContent":"ExpandableInputBar_textContent__1GZlu","dismissIcon":"ExpandableInputBar_dismissIcon___bIRp","inputText":"ExpandableInputBar_inputText__3s_aD","searchBarText":"ExpandableInputBar_searchBarText__3SPtx","actionButton":"ExpandableInputBar_actionButton__1H82r","loader":"ExpandableInputBar_loader__yT3EG","active":"ExpandableInputBar_active__19lDc","slideLeft":"ExpandableInputBar_slideLeft__2gcbo","hasLabel":"ExpandableInputBar_hasLabel__3PhHO","message":"ExpandableInputBar_message__2WrfR","hidden":"ExpandableInputBar_hidden__10rPt"};
styleInject(css);

var ExpandableInputBar = function ExpandableInputBar(_ref) {
  var _ref$prefixClassName = _ref.prefixClassName,
      prefixClassName = _ref$prefixClassName === void 0 ? "" : _ref$prefixClassName,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? "" : _ref$className,
      buttonText = _ref.buttonText,
      buttonType = _ref.buttonType,
      expandedButtonText = _ref.expandedButtonText,
      showLoader = _ref.showLoader,
      disabled = _ref.disabled,
      disableOnlyButton = _ref.disableOnlyButton,
      onDismiss = _ref.onDismiss,
      alwaysActive = _ref.alwaysActive,
      onClick = _ref.onClick,
      message = _ref.message,
      tooltip = _ref.tooltip,
      placeholder = _ref.placeholder,
      label = _ref.label,
      value = _ref.value,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      onKeyDown = _ref.onKeyDown,
      innerRef = _ref.innerRef;

  var _React$useState = React.useState( alwaysActive || showLoader),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isActive = _React$useState2[0],
      setIsActive = _React$useState2[1];

  var _React$useState3 = React.useState(message),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      messageBody = _React$useState4[0],
      setMessageBody = _React$useState4[1];

  React.useEffect(function () {
    setMessageBody(message);
  }, [message]);
  var activateSearchBar = React.useCallback(function () {
    setIsActive(true);
  }, [isActive]);

  var handleOnDismiss = function handleOnDismiss() {
    if (!alwaysActive) {
      setIsActive(false);
    }

    setMessageBody({
      text: "",
      type: ExpandableInputBar.TYPES.DEFAULT
    });
    onDismiss();
  };

  var handleTextChange = function handleTextChange(value) {
    setMessageBody({
      text: "",
      type: ExpandableInputBar.TYPES.DEFAULT
    });
    onChange(value);
  };

  var buttonAction = isActive ? onClick : activateSearchBar;
  var isButtonDisabled = disabled || isActive && !value || showLoader || disableOnlyButton;
  var ctaText = isActive ? expandedButtonText || buttonText : buttonText;
  var dismissIconClass = alwaysActive && !value && styles.hidden;
  var activeClasses = "".concat(styles.active, " ").concat(messageBody.type);
  return React.createElement("div", {
    "data-testid": "ExpandableInputBar",
    className: "\n                ".concat(styles.expandableInputBar, "\n                ").concat(className, "\n                ").concat(isActive ? activeClasses : styles.inactive, "\n                ").concat(label && styles.hasLabel)
  }, React.createElement("div", {
    className: "".concat(styles.inner, " ").concat(prefixClassName, "-inner")
  }, React.createElement("div", {
    className: "".concat(styles.textContent, " ").concat(prefixClassName, "-inner-text-content")
  }, React.createElement(Text, {
    value: value,
    placeholder: placeholder,
    onChange: handleTextChange,
    className: "".concat(styles.inputText, " ").concat(prefixClassName, "-inner-input"),
    disabled: disabled || showLoader,
    onFocus: onFocus,
    onBlur: onBlur,
    onKeyDown: onKeyDown,
    innerRef: innerRef,
    label: label,
    tooltip: tooltip,
    prefixClassName: styles.searchBarText
  }), isActive && !showLoader ? React.createElement(Icon, {
    src: "closeV2",
    onClick: handleOnDismiss,
    className: "".concat(dismissIconClass, " ").concat(styles.dismissIcon, " ").concat(prefixClassName, "-dismiss-icon")
  }) : React.createElement(LoadingComponent, {
    size: 14,
    className: "".concat(styles.loader, " ").concat(prefixClassName, "-loader")
  })), React.createElement(Button, {
    onClick: buttonAction,
    type: buttonType,
    disabled: isButtonDisabled,
    className: "".concat(styles.actionButton, " ").concat(prefixClassName, "-inner-button")
  }, ctaText)), isActive && messageBody.text && React.createElement("div", {
    className: "".concat(styles.message, " ").concat(prefixClassName, "-message")
  }, messageBody.text));
};

ExpandableInputBar.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 text on the action button before expanding */
  buttonText: PropTypes.string,

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

  /** The text on the action button after expanding,
   * if not provided, will use buttonText
   */
  expandedButtonText: PropTypes.string,

  /** Placeholder text on the input after expanding */
  placeholder: PropTypes.string,

  /** Determines if loader is to be shown. Will disable input and button when set to true,
   * signifying an action is in process. */
  showLoader: PropTypes.bool,

  /** Determines if search bar should be disabled */
  disabled: PropTypes.bool,

  /** Flag to disable the button */
  disableOnlyButton: PropTypes.bool,

  /** Function which will be called when dismissing the search 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,

  /** The action which will take place when button is clicked after expanding */
  onClick: PropTypes.func,

  /** Label for the input */
  label: PropTypes.string,

  /** Contains message and its type (default/success/warning/error) */
  message: PropTypes.object,

  /** Tooltip to help user with the input fields */
  tooltip: PropTypes.string,

  /** Value of the Text Field */
  value: PropTypes.string,

  /** onChange Callback */
  onChange: PropTypes.func,

  /** onFocus Callback */
  onFocus: PropTypes.func,

  /** onBlur Callback */
  onBlur: PropTypes.func,

  /** onKeyDown Callback */
  onKeyDown: PropTypes.func,

  /** Passing Ref for input field reference */
  innerRef: PropTypes.func
};
ExpandableInputBar.defaultProps = {
  prefixClassName: "",
  className: "",
  buttonText: "",
  buttonType: Button.TYPES.OUTLINE,
  expandedButtonText: "",
  placeholder: "",
  label: "",
  showLoader: false,
  disabled: false,
  disableOnlyButton: false,
  onDismiss: function onDismiss() {},
  alwaysActive: false,
  onClick: function onClick() {},
  message: {
    text: "",
    type: "default"
  },
  tooltip: "",
  value: "",
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  onKeyDown: function onKeyDown() {},
  innerRef: function innerRef() {}
};
ExpandableInputBar.classNames = {
  $prefix: "Outermost element",
  "$prefix-inner": "Child of the Main element",
  "$prefix-text-content": "Text input container",
  "$prefix-inner-input": "Text input",
  "$prefix-inner-button": "Action button of Inputbar",
  "$prefix-dismiss-icon": "Dismiss icon of Inputbar",
  "$prefix-loader": "Loader for Inputbar",
  "$prefix-message": "Error/Success message for InputBar"
};
ExpandableInputBar.TYPES = _objectSpread2({}, INPUTBAR_MESSAGE_TYPES);
ExpandableInputBar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ExpandableInputBar",
  "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"
    },
    "buttonText": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The text on the action button before expanding"
    },
    "buttonType": {
      "defaultValue": {
        "value": "Button.TYPES.OUTLINE",
        "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.)"
    },
    "expandedButtonText": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The text on the action button after expanding,\nif not provided, will use buttonText"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder text on the input after expanding"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for the input"
    },
    "showLoader": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Determines if loader is to be shown. Will disable input and button when set to true,\nsignifying an action is in process."
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Determines if search bar should be disabled"
    },
    "disableOnlyButton": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Flag to disable the button"
    },
    "onDismiss": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Function which will be called when dismissing the search bar.\nA required prop when driving from parent."
    },
    "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."
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The action which will take place when button is clicked after expanding"
    },
    "message": {
      "defaultValue": {
        "value": "{\n  text: \"\",\n  type: \"default\",\n}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Contains message and its type (default/success/warning/error)"
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Tooltip to help user with the input fields"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Value of the Text Field"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange Callback"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onFocus Callback"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onBlur Callback"
    },
    "onKeyDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onKeyDown Callback"
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Passing Ref for input field reference"
    }
  }
};

export default ExpandableInputBar;
