import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useNavigate}from'@remix-run/react';import {FiSearch}from'@react-icons/all-files/fi/FiSearch.js';import {getCategoryByIdSync,searchArticles}from'../utils/markdownLoader.js';const SidebarSearch = ({
  className = '',
  placeholder = 'Search...'
}) => {
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [showDropdown, setShowDropdown] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const searchContainerRef = useRef(null);
  const inputRef = useRef(null);
  // Perform search as user types
  useEffect(() => {
    if (searchQuery.trim().length > 0) {
      const performSearch = async () => {
        const results = await searchArticles(searchQuery);
        setSearchResults(results.slice(0, 5)); // Limit to 5 results for sidebar
        setShowDropdown(true);
        setSelectedIndex(-1);
      };
      performSearch();
    } else {
      setSearchResults([]);
      setShowDropdown(false);
    }
  }, [searchQuery]);
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = event => {
      const target = event.target;
      if (searchContainerRef.current && !searchContainerRef.current.contains(target)) {
        const dropdown = document.querySelector('[data-sidebar-search-dropdown]');
        if (!dropdown || !dropdown.contains(target)) {
          setShowDropdown(false);
        }
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  const handleSearch = e => {
    e.preventDefault();
    if (searchResults.length > 0) {
      const firstResult = searchResults[0];
      navigate(`/help/${firstResult.categoryId}/${firstResult.slug}`);
      setShowDropdown(false);
      setSearchQuery('');
    }
  };
  const handleInputChange = e => {
    setSearchQuery(e.target.value);
  };
  const handleInputFocus = () => {
    if (searchResults.length > 0) {
      setShowDropdown(true);
    }
  };
  const handleResultClick = article => {
    if (!article || !article.categoryId || !article.slug) {
      return;
    }
    setShowDropdown(false);
    setSearchQuery('');
    navigate(`/help/${article.categoryId}/${article.slug}`);
  };
  return jsxs("div", {
    className: `relative w-full ${className}`,
    ref: searchContainerRef,
    children: [jsx("form", {
      onSubmit: handleSearch,
      className: "relative",
      children: jsxs("div", {
        className: "relative",
        children: [jsx("div", {
          className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
          children: jsx(FiSearch, {
            className: "h-4 w-4 text-gray-400",
            "aria-hidden": "true"
          })
        }), jsx("input", {
          ref: inputRef,
          type: "text",
          className: "block w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-10 pr-3 text-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
          placeholder: placeholder,
          value: searchQuery,
          onChange: handleInputChange,
          onFocus: handleInputFocus
        })]
      })
    }), showDropdown && searchResults.length > 0 && jsx("div", {
      "data-sidebar-search-dropdown": true,
      className: "absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 max-h-64 overflow-y-auto",
      children: jsx("div", {
        className: "py-1",
        children: searchResults.map((article, index) => {
          const category = getCategoryByIdSync(article.categoryId);
          return jsxs("div", {
            onClick: () => handleResultClick(article),
            className: `block px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer ${selectedIndex === index ? 'bg-gray-50 dark:bg-gray-700' : ''}`,
            children: [jsx("div", {
              className: "font-medium text-gray-900 dark:text-gray-100",
              children: article.title
            }), category && jsx("div", {
              className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5",
              children: category.title
            })]
          }, article.id);
        })
      })
    })]
  });
};export{SidebarSearch};//# sourceMappingURL=SidebarSearch.js.map
