'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from 'react';
import CrossCircle from '../../../icon-components/CrossCircle.js';
import Search from '../../../icon-components/Search.js';
import Tabler from '../../../icon-components/Tabler.js';
import { cn } from '../../../../../scalars/lib/utils.js';
import { Input } from '../../../data-entry/input/index.js';
import { useSidebar } from '../sidebar-provider/index.js';
import { SearchNavigationArrow } from './search-navigation-arrow.js';
import { SearchResultCounter } from './search-result-counter.js';
export const SidebarSearch = ({ showStatusFilter }) => {
    const { searchTerm, isSearching, searchResults, activeSearchIndex, isStatusFilterEnabled, changeSearchTerm, nextSearchResult, previousSearchResult, toggleStatusFilter, } = useSidebar();
    const searchControlsRef = useRef(null);
    // Event handlers
    const handleReset = useCallback(() => {
        changeSearchTerm('');
    }, [changeSearchTerm]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'ArrowDown' || e.key === 'Enter') {
            nextSearchResult();
        }
        else if (e.key === 'ArrowUp') {
            previousSearchResult();
        }
    }, [nextSearchResult, previousSearchResult]);
    const handleSearchTermChange = useCallback((e) => {
        changeSearchTerm(e.target.value);
    }, [changeSearchTerm]);
    return (_jsxs("div", { className: "flex w-full gap-2 border-t border-gray-300 p-2 dark:border-gray-800", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Input, { type: "search", value: searchTerm, onChange: handleSearchTermChange, onKeyDown: handleKeyDown, tabIndex: 1, placeholder: "Search", className: "w-full appearance-none !pl-8 [&::-webkit-search-cancel-button]:hidden", style: {
                            paddingRight: (searchControlsRef.current?.clientWidth ?? 0) + 16,
                        } }), _jsx(Search, { height: 16, width: 16, className: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-700 dark:text-gray-50" }), searchTerm && (_jsxs("div", { ref: searchControlsRef, className: "absolute right-2 top-1/2 flex -translate-y-1/2 select-none items-center gap-2", children: [_jsx(SearchResultCounter, { isSearching: isSearching, activeIndex: activeSearchIndex, totalResults: searchResults.length }), _jsxs("div", { className: "flex flex-col text-gray-500 dark:text-gray-700", children: [_jsx(SearchNavigationArrow, { direction: "up", isDisabled: activeSearchIndex === 0, onClick: previousSearchResult }), _jsx(SearchNavigationArrow, { direction: "down", isDisabled: activeSearchIndex === searchResults.length - 1, onClick: nextSearchResult })] }), _jsx(CrossCircle, { onClick: handleReset, height: 16, width: 16, className: "cursor-pointer text-gray-500 hover:text-gray-700 active:text-gray-900 dark:text-gray-700 dark:hover:text-gray-600 dark:active:text-gray-300" })] }))] }), showStatusFilter && (_jsx("button", { type: "button", onClick: toggleStatusFilter, tabIndex: 1, className: cn('rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500', isStatusFilterEnabled
                    ? 'border-blue-500 bg-blue-100 text-blue-900'
                    : 'hover:bg-gray-100 hover:text-gray-700'), children: _jsx(Tabler, { height: 16, width: 16 }) }))] }));
};
//# sourceMappingURL=sidebar-search.js.map