import { jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import { Popup } from '@gravity-ui/uikit';
import { cn } from "../../../classname.js";
import { useSearch } from "../hooks/use-search.js";
import { SearchQA } from "../qa.js";
import { SearchCardView } from "./SearchCardView.js";
import { SeachCompactView } from "./SearchCompactView.js";
import { useObserveIntersection, } from "./hooks/useObserveIntersection.js";
import "./SearchPopup.css";
const b = cn('search-popup');
export const SearchPopup = ({ open, anchor, counter, onClose, intersectionTracking, ...props }) => {
    const { isCompact, searchState, handlers } = useSearch(props);
    const floatingRef = useRef(null);
    const { intersection } = useObserveIntersection({
        floatingRef,
        container: intersectionTracking.container,
        selector: intersectionTracking.selector,
        observerOptions: intersectionTracking.observerOptions,
    });
    return (_jsx(Popup, { open: open, qa: SearchQA.Panel, anchorElement: anchor, placement: "bottom-end", floatingRef: floatingRef, floatingStyles: { opacity: intersection ? 0.8 : 1 }, className: b({ compact: isCompact }), onOpenChange: (_open, _event, reason) => {
            if (reason === 'escape-key') {
                onClose();
            }
        }, children: isCompact ? (_jsx(SeachCompactView, { counter: counter, onClose: onClose, value: searchState.search, onExpand: handlers.onExpand, onChange: handlers.onSearchChange, onFindNext: handlers.onFindNext, onFindPrevious: handlers.onFindPrevious })) : (_jsx(SearchCardView, { counter: counter, onClose: onClose, searchState: searchState, onSearchChange: handlers.onSearchChange, onReplacementChange: handlers.onReplaceChange, onFindNext: handlers.onFindNext, onFindPrevious: handlers.onFindPrevious, onReplace: handlers.onReplace, onReplaceAll: handlers.onReplaceAll, onWholeWordChange: handlers.onWholeWordChange, onCaseSensitiveChange: handlers.onCaseSensitiveChange })) }));
};
SearchPopup.displayName = 'SearchPopup';
export function renderSearchPopup({ anchor, ...props }) {
    if (!anchor)
        return null;
    return _jsx(SearchPopup, { anchor: anchor, ...props });
}
//# sourceMappingURL=SearchPopup.js.map
