import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2023 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import { Input } from "@theme-ui/components";
import { useCallback, useEffect, useRef } from "react";
import { Flex, Text } from "@theme-ui/components";
import { ToolButton } from "../components/tool-button";
import { useEditorSearchStore } from "../stores/search-store";
export function SearchReplacePopup(props) {
    const { editor } = props;
    const { enableRegex, focusNonce, isExpanded, isReplacing, matchCase, matchWholeWord, searchTerm, replaceTerm } = useEditorSearchStore();
    const { results, selectedIndex } = editor.storage
        .searchreplace;
    const searchInputRef = useRef(null);
    const search = useCallback((term) => {
        editor.commands.search(term, useEditorSearchStore.getState());
    }, [editor.commands]);
    useEffect(() => {
        setTimeout(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
    }, [focusNonce]);
    return (_jsx(Flex, { sx: {
            p: 1,
            bg: "background",
            flexDirection: "column",
            boxShadow: ["none", "menu"],
            borderRadius: [0, "default"]
        }, children: _jsxs(Flex, { children: [_jsxs(Flex, { sx: { flexDirection: "column", flex: 1, width: ["auto", 300], mr: 1 }, children: [_jsxs(Flex, { sx: {
                                flex: 1,
                                position: "relative",
                                alignItems: "center",
                                outline: "1px solid var(--border)",
                                borderRadius: "default",
                                p: 1,
                                py: 0,
                                ":focus-within": {
                                    outlineColor: "accent",
                                    outlineWidth: "1.8px"
                                },
                                ":hover": {
                                    outlineColor: "accent"
                                }
                            }, children: [_jsx(Input, { variant: "clean", ref: searchInputRef, autoFocus: true, placeholder: "Find", sx: { p: 0, fontFamily: "monospace" }, value: searchTerm, onChange: (e) => {
                                        search(e.target.value);
                                        useEditorSearchStore.setState({ searchTerm: e.target.value });
                                    }, onKeyDown: (e) => {
                                        if (e.key === "Enter") {
                                            if (e.shiftKey)
                                                editor.commands.moveToPreviousResult();
                                            else
                                                editor.commands.moveToNextResult();
                                        }
                                    } }), _jsxs(Flex, { sx: {
                                        flexShrink: 0,
                                        mr: 0,
                                        alignItems: "center"
                                    }, children: [_jsx(ToolButton, { sx: {
                                                mr: 0
                                            }, toggled: isExpanded, title: "Expand", id: "expand", icon: isExpanded ? "chevronRight" : "chevronLeft", onClick: () => useEditorSearchStore.setState({ isExpanded: !isExpanded }), iconSize: "medium" }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(ToolButton, { sx: {
                                                        mr: 0
                                                    }, toggled: matchCase, title: "Match case", id: "matchCase", icon: "caseSensitive", onClick: () => {
                                                        useEditorSearchStore.setState({ matchCase: !matchCase });
                                                        search(useEditorSearchStore.getState().searchTerm);
                                                    }, iconSize: "medium" }), _jsx(ToolButton, { sx: {
                                                        mr: 0
                                                    }, toggled: matchWholeWord, title: "Match whole word", id: "matchWholeWord", icon: "wholeWord", onClick: () => {
                                                        useEditorSearchStore.setState({
                                                            matchWholeWord: !matchWholeWord
                                                        });
                                                        search(useEditorSearchStore.getState().searchTerm);
                                                    }, iconSize: "medium" }), _jsx(ToolButton, { sx: {
                                                        mr: 0
                                                    }, toggled: enableRegex, title: "Enable regex", id: "enableRegex", icon: "regex", onClick: () => {
                                                        useEditorSearchStore.setState({
                                                            enableRegex: !enableRegex
                                                        });
                                                        search(useEditorSearchStore.getState().searchTerm);
                                                    }, iconSize: "medium" })] })), _jsx(Text, { variant: "subBody", sx: {
                                                flexShrink: 0,
                                                borderLeft: "1px solid var(--border)",
                                                color: "paragraph",
                                                px: 1
                                            }, children: (results === null || results === void 0 ? void 0 : results.length)
                                                ? `${selectedIndex + 1}/${results.length}`
                                                : "0/0" })] })] }), isReplacing && (_jsx(Input, { sx: { mt: 1, p: "7px", fontFamily: "monospace" }, placeholder: "Replace", value: replaceTerm, onChange: (e) => useEditorSearchStore.setState({ replaceTerm: e.target.value }) }))] }), _jsxs(Flex, { sx: { flexDirection: "column" }, children: [_jsxs(Flex, { sx: { alignItems: "center", height: "33.2px" }, children: [editor.isEditable && (_jsx(ToolButton, { toggled: isReplacing, title: "Toggle replace", id: "toggleReplace", icon: "replace", onClick: () => useEditorSearchStore.setState({
                                        isReplacing: !isReplacing
                                    }), sx: { mr: 0 }, iconSize: "big" })), _jsx(ToolButton, { toggled: false, title: "Previous match", id: "previousMatch", icon: "previousMatch", onClick: () => editor.commands.moveToPreviousResult(), sx: { mr: 0 }, iconSize: "big" }), _jsx(ToolButton, { toggled: false, title: "Next match", id: "nextMatch", icon: "nextMatch", onClick: () => editor.commands.moveToNextResult(), sx: { mr: 0 }, iconSize: "big" }), _jsx(ToolButton, { toggled: false, title: "Close", id: "close", icon: "close", onClick: () => editor.chain().focus().endSearch().run(), sx: { mr: 0 }, iconSize: "big" })] }), isReplacing && (_jsxs(Flex, { sx: { alignItems: "center", height: "33.2px", mt: 1 }, children: [_jsx(ToolButton, { toggled: false, title: "Replace", id: "replace", icon: "replaceOne", onClick: () => editor.commands.replace(useEditorSearchStore.getState().replaceTerm), sx: { mr: 0 }, iconSize: 18 }), _jsx(ToolButton, { toggled: false, title: "Replace all", id: "replaceAll", icon: "replaceAll", onClick: () => editor.commands.replaceAll(useEditorSearchStore.getState().replaceTerm), sx: { mr: 0 }, iconSize: 18 })] }))] })] }) }));
}
