import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { DelayedTextInput, FormRow } from '@gravity-ui/components';
import { Xmark } from '@gravity-ui/icons';
import { Button, Card, Checkbox, Flex, Icon, Text, sp } from '@gravity-ui/uikit';
import { cn } from "../../../classname.js";
import { i18n } from "../../../i18n/search/index.js";
import { useAutoFocus } from "../../../react-utils/useAutoFocus.js";
import { SearchQA } from "../qa.js";
import { SearchTextInput } from "./SearchTextInput.js";
import "./SearchCardView.css";
const b = cn('search-card');
export const SearchCardView = ({ style, className, counter, searchState, onClose, onSearchChange, onReplacementChange, onFindPrevious, onFindNext, onReplace, onReplaceAll, onWholeWordChange, onCaseSensitiveChange, }) => {
    const searchInputRef = useRef(null);
    useAutoFocus(searchInputRef, [], 200);
    return (_jsxs(Card, { size: "l", spacing: { pt: 4, pb: 5, pl: 5, pr: 5 }, style: style, className: b(null, className), children: [_jsxs(Flex, { spacing: { mb: 5 }, alignItems: "center", justifyContent: "space-between", className: b('header'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title') }), _jsx(Button, { size: "m", view: "flat", onClick: onClose, "aria-label": i18n('action_close'), qa: SearchQA.CloseBtn, children: _jsx(Icon, { data: Xmark }) })] }), _jsxs(FormRow, { direction: "row", label: i18n('title_search'), className: b('row', sp({ mb: 4 })), children: [_jsx(SearchTextInput, { counter: counter, onFindNext: onFindNext, onFindPrevious: onFindPrevious, controlRef: searchInputRef, className: sp({ mb: 2 }), onUpdate: onSearchChange, value: searchState.search, delay: 300 }), _jsx(Checkbox, { size: "m", onUpdate: onCaseSensitiveChange, checked: searchState.caseSensitive, qa: SearchQA.CaseSensitiveCheck, className: sp({ mr: 4 }), children: i18n('label_case-sensitive') }), _jsx(Checkbox, { size: "m", checked: searchState.wholeWord, onUpdate: onWholeWordChange, qa: SearchQA.WholeWordCheck, children: i18n('label_whole-word') })] }), _jsx(FormRow, { direction: "row", label: i18n('title_replace'), className: b('row', sp({ mb: 5 })), children: _jsx(DelayedTextInput, { size: "l", delay: 300, value: searchState.replace, onUpdate: onReplacementChange, qa: SearchQA.ReplaceInput }) }), _jsxs(Flex, { justifyContent: "flex-end", gap: 2, className: b('footer'), children: [_jsx(Button, { size: "l", view: "normal", onClick: onReplaceAll, disabled: !searchState.search, qa: SearchQA.ReplaceAllBtn, children: i18n('action_replace_all') }), _jsx(Button, { view: "action", size: "l", disabled: !searchState.search, onClick: onReplace, qa: SearchQA.ReplaceBtn, children: i18n('action_replace') })] })] }));
};
//# sourceMappingURL=SearchCardView.js.map
