import React, { useEffect, useMemo, useRef } from "react";
import { StyledActionWrapper, StyledCommandPaletteHeader, StyledInput, StyledParameter, StyledSearchIcon, StyledSpinnerLoader } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { useModeContext } from "./context/ModeContext";
import { useSearchContext } from "./context/SearchContext";
import { IconButton } from "../IconButton";
import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
import { Tooltip } from "../Tooltip";
export const CommandPaletteHeader = _ref => {
  let {
    loading = false,
    commandsLength,
    itemsLength
  } = _ref;
  const inputRef = useRef(null);
  const {
    mode,
    setMode,
    idModeEnabled
  } = useModeContext();
  const {
    setSelected,
    selected
  } = useSelectedContext();
  const {
    search,
    onChangeSearch
  } = useSearchContext();
  const focusInput = () => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  };
  const clearInput = () => {
    if (inputRef && inputRef.current) {
      inputRef.current.value = "";
      onChangeSearch("");
    }
  };
  useEffect(() => {
    if (search.length > 0) {
      if (itemsLength > commandsLength) {
        setSelected(commandsLength);
      } else {
        setSelected(0);
      }
    }
  }, [search, commandsLength, itemsLength, setSelected]);
  useEffect(() => {
    focusInput();
  }, [mode]);
  const handleInputPlaceholder = useMemo(() => {
    if (typeof mode === "object") {
      return "Search";
    }
    if (mode === "id") {
      return "1";
    }
    return "Search or jump to";
  }, [mode]);
  const handleKeyDown = e => {
    if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
      setMode("default");
      clearInput();
    }
    if (e.key === "Enter") {
      const selectedItem = document.querySelectorAll(".cp-item")[selected];
      if (itemsLength > 0) {
        selectedItem.click();
      }
    }
  };
  return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
    className: "cp-header"
  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React.createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React.createElement(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: e => {
      const inputText = e.target.value;
      if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
        setMode("id");
        onChangeSearch(inputText.slice(1));
        return;
      }
      onChangeSearch(inputText);
    }
  }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(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.createElement(Tooltip, {
    title: "Search by ID",
    placement: "top"
  }, /*#__PURE__*/React.createElement(IconButton, {
    onKeyPress: e => {
      if (e.key === "Enter") {
        setMode("id");
        clearInput();
      }
    },
    onClick: () => {
      setMode("id");
      clearInput();
    },
    variant: "text gray"
  }, /*#__PURE__*/React.createElement(HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React.createElement(Tooltip, {
    title: "Clear",
    placement: "top"
  }, /*#__PURE__*/React.createElement(IconButton, {
    variant: "text gray",
    onKeyPress: e => {
      if (e.key === "Enter") {
        setMode("default");
        clearInput();
        focusInput();
      }
    },
    onClick: () => {
      setMode("default");
      clearInput();
      focusInput();
    }
  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
};
CommandPaletteHeader.displayName = "CommandPaletteItem";
//# sourceMappingURL=CommandPaletteHeader.js.map