import * as React from 'react';
import { useState } from 'react';
import { connect } from 'react-redux';
import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { StyleComponent } from '../Components/StyleComponent';
import { Flex } from '../../components/Flex';
import { CheckBox } from '../../components/CheckBox';
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import { useQuickSearchDebounced } from './useQuickSearchDebounced';
import { QuickSearchInput } from './QuickSearchInput';
import HelpBlock from '../../components/HelpBlock';
import { Card } from '../../components/Card';
const QuickSearchPopupComponent = (props) => {
    const [searchText, search] = useQuickSearchDebounced(props);
    const [state, setState] = useState({
        RunQueryAfterQuickSearch: props.api.optionsApi.getQuickSearchOptions().filterGridAfterQuickSearch,
        EditedStyle: props.QuickSearchStyle,
    });
    const onUpdateStyle = (style) => {
        setState({ ...state, EditedStyle: style });
        props.onSetMatchingCellStyle(style);
    };
    const onQuickSearchBehaviourChange = (checked) => {
        setState({ ...state, RunQueryAfterQuickSearch: checked });
        props.api.optionsApi.getAdaptableOptions().quickSearchOptions.filterGridAfterQuickSearch =
            checked;
    };
    return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col" },
        React.createElement(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
            React.createElement(Card, null,
                React.createElement(Card.Title, null, "Search Text"),
                React.createElement(Card.Body, { className: "twa:p-1 twa:w-fit" },
                    React.createElement(QuickSearchInput, null))),
            React.createElement(Card, null,
                React.createElement(Card.Title, null, "Behaviour"),
                React.createElement(Card.Body, { className: "twa:p-1", gap: 2 },
                    React.createElement(HelpBlock, { className: "twa:text-2 twa:w-fit" },
                        "Filter Grid when searching to only show rows with matching cells; ",
                        React.createElement("b", null, "use with care"),
                        " as can cause performance issues"),
                    React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))),
            React.createElement(Card.Title, { border: false, className: "twa:pt-3" }, "Cell Matching Style"),
            React.createElement(Card, null,
                React.createElement(Card.Body, null,
                    React.createElement(StyleComponent, { headless: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle }))))));
};
function mapStateToProps(state, ownProps) {
    return {
        QuickSearchText: state.QuickSearch.QuickSearchText,
        QuickSearchStyle: state.QuickSearch.CellMatchStyle ?? {},
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(quickSearchText)),
        onSetMatchingCellStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style)),
    };
}
export const QuickSearchPopup = connect(mapStateToProps, mapDispatchToProps)(QuickSearchPopupComponent);
