'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var useKey = require('../../hooks/useKey.cjs');
var md = require('react-icons/md');
var react$1 = require('@chakra-ui/react');

const SearchField = ({
  setSearchText,
  searchText,
  placeholderText = "Search...",
  className,
  icon = "search"
}) => {
  const isEmpty = !searchText || searchText === "";
  const inputRef = react.useRef(null);
  const isAlreadyFocused = () => document.activeElement && (inputRef == null ? void 0 : inputRef.current) && document.activeElement !== (inputRef == null ? void 0 : inputRef.current) && document.activeElement.tagName === "INPUT";
  const reset = () => setSearchText("");
  const focus = () => !isAlreadyFocused() && (inputRef == null ? void 0 : inputRef.current) && inputRef.current.focus();
  const blur = () => (inputRef == null ? void 0 : inputRef.current) && inputRef.current.blur();
  useKey.useKey("Escape", isEmpty ? blur : reset);
  useKey.useKey("/", focus);
  const tagColorScheme = react$1.useColorModeValue("gray", "light");
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "SearchField " + className, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { minWidth: "500px", children: [
    /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { width: "2rem" }),
    /* @__PURE__ */ jsxRuntime.jsx(
      react$1.Tooltip,
      {
        placement: "bottom",
        hasArrow: true,
        py: 1,
        label: isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
          /* @__PURE__ */ jsxRuntime.jsx(react$1.Tag, { colorScheme: tagColorScheme, size: "sm", children: "/" }),
          " ",
          "to focus"
        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
          /* @__PURE__ */ jsxRuntime.jsx(react$1.Tag, { colorScheme: tagColorScheme, size: "sm", children: "Esc" }),
          " ",
          "to clear"
        ] }),
        children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { onClick: focus, children: /* @__PURE__ */ jsxRuntime.jsx(
          react$1.Icon,
          {
            "data-testid": "search-field-search-icon",
            as: icon === "filter" ? md.MdOutlineFilterList : md.MdSearch,
            color: "gray.300",
            "aria-label": "search-icon-focus"
          }
        ) }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { onClick: reset, children: /* @__PURE__ */ jsxRuntime.jsx(
          react$1.Icon,
          {
            "data-testid": "search-field-reset-icon",
            as: md.MdClose,
            color: "gray.300",
            "aria-label": "search-icon-reset"
          }
        ) })
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      react$1.Input,
      {
        "data-testid": "search-field-input",
        ref: inputRef,
        type: "text",
        className: "search-control",
        placeholder: placeholderText,
        onChange: (event) => setSearchText(event.target.value),
        value: searchText
      }
    )
  ] }) });
};

module.exports = SearchField;
//# sourceMappingURL=SearchField.cjs.map
