import * as React from 'react';
import { useAdaptable } from '../../AdaptableContext';
import { FloatingFilter } from './FloatingFilter';
import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
/**
 * This wrapper knows about predicates.
 * It transforms predicates in QlPredicates.
 */
export const AdaptableFloatingFilter = (props) => {
    const adaptable = useAdaptable();
    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId);
    const onClear = React.useCallback(() => {
        handleClear();
        props.onClear?.();
    }, [handleClear, props.onClear]);
    const onPredicateChange = React.useCallback((newPredicate) => {
        handlePredicateChange(newPredicate);
        props.onChange?.();
    }, [handlePredicateChange, props.onChange]);
    if (!column) {
        return null;
    }
    return (React.createElement(FloatingFilter, { onKeydown: (event) => {
            const key = event.key;
            const predicate = adaptable.api.filterApi.columnFilterApi.internalApi.findPredicateDefByShortcut(key, column);
            if (predicate) {
                event.stopPropagation();
                event.preventDefault();
                handleOnChange([
                    {
                        PredicateId: predicate.id,
                        Inputs: [],
                    },
                ]);
                props.onChange?.();
            }
        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange, onChange: props.onChange }));
};
