"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CommandPaletteHeader = void 0;
var _react = _interopRequireWildcard(require("react"));
var _CommandPalette = require("./CommandPalette.styles");
var _context = require("./context");
var _ModeContext = require("./context/ModeContext");
var _SearchContext = require("./context/SearchContext");
var _IconButton = require("../IconButton");
var _Icons = require("../Icons");
var _Tooltip = require("../Tooltip");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var CommandPaletteHeader = exports.CommandPaletteHeader = function CommandPaletteHeader(_ref) {
  var _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    commandsLength = _ref.commandsLength,
    itemsLength = _ref.itemsLength;
  var inputRef = (0, _react.useRef)(null);
  var _useModeContext = (0, _ModeContext.useModeContext)(),
    mode = _useModeContext.mode,
    setMode = _useModeContext.setMode,
    idModeEnabled = _useModeContext.idModeEnabled;
  var _useSelectedContext = (0, _context.useSelectedContext)(),
    setSelected = _useSelectedContext.setSelected,
    selected = _useSelectedContext.selected;
  var _useSearchContext = (0, _SearchContext.useSearchContext)(),
    search = _useSearchContext.search,
    onChangeSearch = _useSearchContext.onChangeSearch;
  var focusInput = function focusInput() {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  };
  var clearInput = function clearInput() {
    if (inputRef && inputRef.current) {
      inputRef.current.value = "";
      onChangeSearch("");
    }
  };
  (0, _react.useEffect)(function () {
    if (search.length > 0) {
      if (itemsLength > commandsLength) {
        setSelected(commandsLength);
      } else {
        setSelected(0);
      }
    }
  }, [search, commandsLength, itemsLength, setSelected]);
  (0, _react.useEffect)(function () {
    focusInput();
  }, [mode]);
  var handleInputPlaceholder = (0, _react.useMemo)(function () {
    if (typeof mode === "object") {
      return "Search";
    }
    if (mode === "id") {
      return "1";
    }
    return "Search or jump to";
  }, [mode]);
  var handleKeyDown = function handleKeyDown(e) {
    if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
      setMode("default");
      clearInput();
    }
    if (e.key === "Enter") {
      var selectedItem = document.querySelectorAll(".cp-item")[selected];
      if (itemsLength > 0) {
        selectedItem.click();
      }
    }
  };
  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
    className: "cp-header"
  }, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledInput, {
    ref: inputRef,
    autoFocus: true,
    placeholder: handleInputPlaceholder,
    type: "search",
    "aria-autocomplete": "list",
    autoCapitalize: "none",
    autoComplete: "off",
    autoCorrect: "off",
    role: "combobox",
    spellCheck: false,
    value: search,
    onKeyDown: handleKeyDown,
    onChange: function onChange(e) {
      var inputText = e.target.value;
      if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
        setMode("id");
        onChangeSearch(inputText.slice(1));
        return;
      }
      onChangeSearch(inputText);
    }
  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {
    "aria-busy": true,
    "aria-label": "Loading...",
    "aria-valuemax": 100,
    "aria-valuemin": 0,
    role: "progressbar"
  }) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
    title: "Search by ID",
    placement: "top"
  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
    onKeyPress: function onKeyPress(e) {
      if (e.key === "Enter") {
        setMode("id");
        clearInput();
      }
    },
    onClick: function onClick() {
      setMode("id");
      clearInput();
    },
    variant: "text gray"
  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
    title: "Clear",
    placement: "top"
  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
    variant: "text gray",
    onKeyPress: function onKeyPress(e) {
      if (e.key === "Enter") {
        setMode("default");
        clearInput();
        focusInput();
      }
    },
    onClick: function onClick() {
      setMode("default");
      clearInput();
      focusInput();
    }
  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))) : null));
};
CommandPaletteHeader.displayName = "CommandPaletteItem";
//# sourceMappingURL=CommandPaletteHeader.js.map