import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { ChevronDown, ChevronUp, Xmark } from '@gravity-ui/icons';
import { Button, Card, Checkbox, Icon, Popup, TextInput, sp, } from '@gravity-ui/uikit';
import { cn } from "../../../../classname.js";
import { i18n } from "../../../../i18n/search/index.js";
import { enterKeyHandler } from "../../../../utils/handlers.js";
import "./SearchPopup.css";
const b = cn('search-card');
const noop = () => { };
const inverse = (val) => !val;
export const SearchCard = ({ initial, onChange = noop, onClose = noop, onSearchPrev = noop, onSearchNext = noop, onConfigChange = noop, }) => {
    const [query, setQuery] = useState(initial.search);
    const [isCaseSensitive, setIsCaseSensitive] = useState(initial.caseSensitive);
    const [isWholeWord, setIsWholeWord] = useState(initial.wholeWord);
    const textInputRef = useRef(null);
    const setInputFocus = () => {
        textInputRef.current?.focus();
    };
    const handleInputChange = (value) => {
        setQuery(value);
        onChange(value);
    };
    const handleClose = () => {
        setQuery('');
        onClose(query);
        setInputFocus();
    };
    const handlePrev = () => {
        onSearchPrev(query);
        setInputFocus();
    };
    const handleNext = () => {
        onSearchNext(query);
        setInputFocus();
    };
    const handleIsCaseSensitive = () => {
        onConfigChange({
            caseSensitive: !isCaseSensitive,
            wholeWord: isWholeWord,
        });
        setIsCaseSensitive(inverse);
        setInputFocus();
    };
    const handleIsWholeWord = () => {
        onConfigChange({
            caseSensitive: isCaseSensitive,
            wholeWord: !isWholeWord,
        });
        setIsWholeWord(inverse);
        setInputFocus();
    };
    const handleSearchKeyPress = enterKeyHandler(handleNext);
    return (_jsxs(Card, { className: b(), children: [_jsxs("div", { className: b('header'), children: [_jsxs("span", { className: b('title'), children: [" ", i18n('title')] }), _jsx(Button, { onClick: handleClose, size: "s", view: "flat", children: _jsx(Icon, { data: Xmark, size: 14 }) })] }), _jsx(TextInput, { controlRef: textInputRef, className: sp({ mb: 2 }), size: "s", autoFocus: true, onKeyPress: handleSearchKeyPress, onUpdate: handleInputChange, value: query, endContent: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: handlePrev, children: _jsx(Icon, { data: ChevronUp, size: 12 }) }), _jsx(Button, { onClick: handleNext, children: _jsx(Icon, { data: ChevronDown, size: 12 }) })] }) }), _jsx(Checkbox, { size: "m", onUpdate: handleIsCaseSensitive, checked: isCaseSensitive, className: sp({ mr: 4 }), children: i18n('label_case-sensitive') }), _jsx(Checkbox, { size: "m", onUpdate: handleIsWholeWord, checked: isWholeWord, children: i18n('label_whole-word') })] }));
};
export const SearchPopup = ({ open, anchor, ...props }) => {
    return (_jsx(Popup, { open: open, anchorElement: anchor, placement: "bottom-end", onOpenChange: (_open, _event, reason) => {
            if (reason === 'escape-key') {
                props.onClose();
            }
        }, children: _jsx(SearchCard, { ...props }) }));
};
SearchPopup.displayName = 'SearchPopup';
export function renderSearchPopup({ anchor, ...props }) {
    return _jsx(_Fragment, { children: anchor && _jsx(SearchPopup, { anchor: anchor, ...props }) });
}
//# sourceMappingURL=SearchPopup.js.map
