"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchPopup = exports.SearchCard = void 0;
exports.renderSearchPopup = renderSearchPopup;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../../classname.js");
const search_1 = require("../../../../i18n/search/index.js");
const handlers_1 = require("../../../../utils/handlers.js");
require("./SearchPopup.css");
const b = (0, classname_1.cn)('search-card');
const noop = () => { };
const inverse = (val) => !val;
const SearchCard = ({ initial, onChange = noop, onClose = noop, onSearchPrev = noop, onSearchNext = noop, onConfigChange = noop, }) => {
    const [query, setQuery] = (0, react_1.useState)(initial.search);
    const [isCaseSensitive, setIsCaseSensitive] = (0, react_1.useState)(initial.caseSensitive);
    const [isWholeWord, setIsWholeWord] = (0, react_1.useState)(initial.wholeWord);
    const textInputRef = (0, react_1.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 = (0, handlers_1.enterKeyHandler)(handleNext);
    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsxs)("span", { className: b('title'), children: [" ", (0, search_1.i18n)('title')] }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: handleClose, size: "s", view: "flat", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark, size: 14 }) })] }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { controlRef: textInputRef, className: (0, uikit_1.sp)({ mb: 2 }), size: "s", autoFocus: true, onKeyPress: handleSearchKeyPress, onUpdate: handleInputChange, value: query, endContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: handlePrev, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronUp, size: 12 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: handleNext, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, size: 12 }) })] }) }), (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", onUpdate: handleIsCaseSensitive, checked: isCaseSensitive, className: (0, uikit_1.sp)({ mr: 4 }), children: (0, search_1.i18n)('label_case-sensitive') }), (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", onUpdate: handleIsWholeWord, checked: isWholeWord, children: (0, search_1.i18n)('label_whole-word') })] }));
};
exports.SearchCard = SearchCard;
const SearchPopup = ({ open, anchor, ...props }) => {
    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, anchorElement: anchor, placement: "bottom-end", onOpenChange: (_open, _event, reason) => {
            if (reason === 'escape-key') {
                props.onClose();
            }
        }, children: (0, jsx_runtime_1.jsx)(exports.SearchCard, { ...props }) }));
};
exports.SearchPopup = SearchPopup;
exports.SearchPopup.displayName = 'SearchPopup';
function renderSearchPopup({ anchor, ...props }) {
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: anchor && (0, jsx_runtime_1.jsx)(exports.SearchPopup, { anchor: anchor, ...props }) });
}
//# sourceMappingURL=SearchPopup.js.map
