import { debounce } from 'lodash';
import * as React from 'react';
import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
import { useAdaptable } from '../../../AdaptableContext';
import { usePredicateDef } from '../hooks';
import { ColumnFilterInput } from './ColumnFilterInput';
import { FloatingFilterValues } from './FloatingFilterValues';
export const FloatingFilterInputList = (props) => {
    const { api } = useAdaptable();
    const columnType = React.useMemo(() => {
        return api.columnApi.getColumnDataTypeForColumnId(props.columnId);
    }, [props.columnId]);
    const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
    const fnTypeInput = mapColumnDataTypeToExpressionFunctionType(columnType);
    const matchingInputs = predicateDef
        ? getOperatorMatchingInputs(fnTypeInput, predicateDef?.inputs, true)
        : [];
    const debouncedPredicateChange = React.useCallback(debounce((predicate) => {
        props.onPredicateChange(predicate);
    }, 300), [props.predicate, props.columnId]);
    if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
        return (React.createElement(FloatingFilterValues, { inline: true, columnId: props.columnId, disabled: props.disabled, selectProps: {
                menuStyle: {
                    left: -20, // the size of the "in" filter icon
                },
            }, onClear: () => {
                props.onPredicateChange({ operator: props.predicate.operator, args: [] });
            }, onChange: (inputs) => {
                props.onPredicateChange({
                    operator: props.predicate.operator,
                    args: inputs,
                });
            }, value: props.predicate.args, 
            // are not known ql operators for now
            // should change when porting, it has knoladge about predicates
            type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
    }
    return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
        const value = props?.predicate?.args?.[index];
        return (React.createElement(ColumnFilterInput, { filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
                const args = [...props.predicate.args];
                args.splice(index, 1);
                const newPredicate = {
                    operator: props.predicate.operator,
                    args: args,
                };
                debouncedPredicateChange(newPredicate);
            }, onChange: (value) => {
                const newPredicate = {
                    operator: props.predicate.operator,
                    args: [...props.predicate.args],
                };
                newPredicate.args[index] = value;
                debouncedPredicateChange(newPredicate);
            } }));
    })));
};
