import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef } from 'react';
import { useKey } from '../../hooks/useKey.js';
import { MdOutlineFilterList, MdSearch, MdClose } from 'react-icons/md';
import { useColorModeValue, InputGroup, InputLeftElement, Tooltip, Tag, Icon, Input } from '@chakra-ui/react';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
const SearchField = (_a) => {
  var _b = _a, {
    setSearchText,
    searchText,
    placeholderText = "Search...",
    icon = "search",
    isDisabled = false
  } = _b, chakraProps = __objRest(_b, [
    "setSearchText",
    "searchText",
    "placeholderText",
    "icon",
    "isDisabled"
  ]);
  const isEmpty = !searchText || searchText === "";
  const inputRef = 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 = () => !isDisabled && !isAlreadyFocused() && (inputRef == null ? void 0 : inputRef.current) && inputRef.current.focus();
  const blur = () => (inputRef == null ? void 0 : inputRef.current) && inputRef.current.blur();
  useKey("Escape", isEmpty ? blur : reset);
  useKey("/", focus);
  const tagColorScheme = useColorModeValue("gray", "light");
  return /* @__PURE__ */ jsxs(InputGroup, __spreadProps(__spreadValues({}, chakraProps), { children: [
    /* @__PURE__ */ jsx(InputLeftElement, { width: "2rem" }),
    /* @__PURE__ */ jsx(
      Tooltip,
      {
        isDisabled,
        placement: "bottom",
        hasArrow: true,
        py: 1,
        label: isEmpty ? /* @__PURE__ */ jsxs("span", { children: [
          /* @__PURE__ */ jsx(Tag, { colorScheme: tagColorScheme, size: "sm", children: "/" }),
          " ",
          "to focus"
        ] }) : /* @__PURE__ */ jsxs("span", { children: [
          /* @__PURE__ */ jsx(Tag, { colorScheme: tagColorScheme, size: "sm", children: "Esc" }),
          " ",
          "to clear"
        ] }),
        children: isEmpty ? /* @__PURE__ */ jsx(InputLeftElement, { onClick: focus, children: /* @__PURE__ */ jsx(
          Icon,
          {
            "data-testid": "search-field-search-icon",
            as: icon === "filter" ? MdOutlineFilterList : MdSearch,
            color: "gray.300",
            "aria-label": "search-icon-focus"
          }
        ) }) : /* @__PURE__ */ jsx(InputLeftElement, { onClick: reset, children: /* @__PURE__ */ jsx(
          Icon,
          {
            "data-testid": "search-field-reset-icon",
            as: MdClose,
            color: "gray.300",
            "aria-label": "search-icon-reset"
          }
        ) })
      }
    ),
    /* @__PURE__ */ jsx(
      Input,
      {
        "data-testid": "search-field-input",
        ref: inputRef,
        type: "text",
        className: "search-control",
        placeholder: placeholderText,
        onChange: (event) => setSearchText(event.target.value),
        value: searchText,
        isDisabled
      }
    )
  ] }));
};

export { SearchField as default };
//# sourceMappingURL=SearchField.js.map
