"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchCardView = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const components_1 = require("@gravity-ui/components");
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 useAutoFocus_1 = require("../../../react-utils/useAutoFocus.js");
const qa_1 = require("../qa.js");
const SearchTextInput_1 = require("./SearchTextInput.js");
require("./SearchCardView.css");
const b = (0, classname_1.cn)('search-card');
const SearchCardView = ({ style, className, counter, searchState, onClose, onSearchChange, onReplacementChange, onFindPrevious, onFindNext, onReplace, onReplaceAll, onWholeWordChange, onCaseSensitiveChange, }) => {
    const searchInputRef = (0, react_1.useRef)(null);
    (0, useAutoFocus_1.useAutoFocus)(searchInputRef, [], 200);
    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { size: "l", spacing: { pt: 4, pb: 5, pl: 5, pr: 5 }, style: style, className: b(null, className), children: [(0, jsx_runtime_1.jsxs)(uikit_1.Flex, { spacing: { mb: 5 }, alignItems: "center", justifyContent: "space-between", className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", className: b('title'), children: (0, search_1.i18n)('title') }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", onClick: onClose, "aria-label": (0, search_1.i18n)('action_close'), qa: qa_1.SearchQA.CloseBtn, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark }) })] }), (0, jsx_runtime_1.jsxs)(components_1.FormRow, { direction: "row", label: (0, search_1.i18n)('title_search'), className: b('row', (0, uikit_1.sp)({ mb: 4 })), children: [(0, jsx_runtime_1.jsx)(SearchTextInput_1.SearchTextInput, { counter: counter, onFindNext: onFindNext, onFindPrevious: onFindPrevious, controlRef: searchInputRef, className: (0, uikit_1.sp)({ mb: 2 }), onUpdate: onSearchChange, value: searchState.search, delay: 300 }), (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", onUpdate: onCaseSensitiveChange, checked: searchState.caseSensitive, qa: qa_1.SearchQA.CaseSensitiveCheck, 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", checked: searchState.wholeWord, onUpdate: onWholeWordChange, qa: qa_1.SearchQA.WholeWordCheck, children: (0, search_1.i18n)('label_whole-word') })] }), (0, jsx_runtime_1.jsx)(components_1.FormRow, { direction: "row", label: (0, search_1.i18n)('title_replace'), className: b('row', (0, uikit_1.sp)({ mb: 5 })), children: (0, jsx_runtime_1.jsx)(components_1.DelayedTextInput, { size: "l", delay: 300, value: searchState.replace, onUpdate: onReplacementChange, qa: qa_1.SearchQA.ReplaceInput }) }), (0, jsx_runtime_1.jsxs)(uikit_1.Flex, { justifyContent: "flex-end", gap: 2, className: b('footer'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "l", view: "normal", onClick: onReplaceAll, disabled: !searchState.search, qa: qa_1.SearchQA.ReplaceAllBtn, children: (0, search_1.i18n)('action_replace_all') }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "action", size: "l", disabled: !searchState.search, onClick: onReplace, qa: qa_1.SearchQA.ReplaceBtn, children: (0, search_1.i18n)('action_replace') })] })] }));
};
exports.SearchCardView = SearchCardView;
//# sourceMappingURL=SearchCardView.js.map
