"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ActionBarSearch = ActionBarSearch;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faMagnifyingGlass = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _useTranslation = require("../hooks/use-translation");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Expandable search component.
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
function ActionBarSearch({
  searchQuery = '',
  onChange = () => {},
  onKeyDown = () => {},
  focusPlaceholder = '',
  customClassName = '',
  searchText,
  searchInputAriaLabel,
  isDisabled = false,
  testId = 'actionbar-search-button',
  clearSearchTestId = 'action-bar-search-clear',
  searchInputTestId = 'actionbar-search-input',
  searchInputContainerTestId = 'actionbar-search-input-container',
  ...inputProps
}) {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const searchTextWithDefault = searchText ?? t('Search');
  const [isActive, setIsActive] = (0, _react.useState)(searchQuery !== '');
  const [value, setValue] = (0, _react.useState)(searchQuery);
  (0, _react.useEffect)(() => {
    // if searchQuery changed from the outside and is different from value
    // we have to sync those 2
    if (searchQuery !== value) {
      // depending on a new value - show or hide the input
      if (!searchQuery) {
        setIsActive(false);
        // we have to call onChange because in many usages searchQuery and onChange are not connected =(
        onChange('');
      } else {
        setIsActive(true);
      }
      setValue(searchQuery);
    }
  }, [searchQuery]);
  function onBlur() {
    setIsActive(value !== '');
  }
  function onValueEnter({
    target
  }) {
    setValue(target.value);
    onChange(target.value);
  }
  function onClick() {
    if (isDisabled) {
      return;
    }
    setIsActive(true);
  }
  function onClear() {
    setIsActive(false);
    setValue('');
    onChange('');
  }

  // onMouseDown is used to prevent premature onBlur event
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)('action-bar-search-container', customClassName),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
      "test-id": testId,
      className: (0, _classnames.default)('button command action-bar-search-button', {
        active: isActive
      }),
      type: "button",
      onClick: onClick,
      disabled: isDisabled,
      "aria-label": searchTextWithDefault,
      "aria-expanded": isActive,
      tabIndex: isActive ? -1 : 0,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faMagnifyingGlass.faMagnifyingGlass,
        className: "search-icon",
        onMouseDown: e => {
          e.preventDefault();
        }
      }), !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: searchTextWithDefault
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)('input-container', {
        active: isActive
      }),
      "test-id": searchInputContainerTestId,
      children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          "aria-label": searchInputAriaLabel ?? t('Search input'),
          "test-id": searchInputTestId,
          autoFocus: true,
          type: "text",
          className: "action-bar-search-input",
          placeholder: focusPlaceholder,
          onChange: onValueEnter,
          onBlur: onBlur,
          onKeyDown: onKeyDown,
          value: value,
          disabled: isDisabled,
          ...inputProps
        }), value !== '' && !isDisabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: _faXmark.faXmark,
          "test-id": clearSearchTestId,
          className: "clear-search",
          onMouseDown: e => {
            e.preventDefault();
          },
          onClick: onClear
        })]
      })
    })]
  });
}