import * as React from 'react';
import { useSelector } from 'react-redux';
import { Flex } from '../../../components/Flex';
import { Drawer } from '../../../components/Drawer/index';
import { QuickSearchFloatingVisibilitySelector } from '../../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../../AdaptableContext';
import { QuickSearchInput } from '../QuickSearchInput';
export const QuickSearchDrawer = () => {
    const adaptable = useAdaptable();
    const isOpen = useSelector((state) => QuickSearchFloatingVisibilitySelector(state.Internal));
    return (React.createElement(Drawer, { open: isOpen, onOpenChange: (open) => {
            if (open) {
                adaptable.api.quickSearchApi.showFloatingQuickSearch();
            }
            else {
                adaptable.api.quickSearchApi.hideFloatingQuickSearch();
            }
        } },
        React.createElement(Flex, { className: "ab-FloatinQuickSearch ab-FloatingQuickSearch" },
            React.createElement(QuickSearchInput, { autoFocus: true }))));
};
