import * as React from 'react';
import { isAdaptableSystemIcon } from '../../../components/Icon';
import HelpBlock from '../../../components/HelpBlock';
import { Tag } from '../../../components/Tag';
import AdaptableInput from '../AdaptableInput';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { Select } from '../../../components/Select';
import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
import { useAdaptable } from '../../AdaptableContext';
import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
import { useEffect } from 'react';
import { Box, Flex } from '../../../components/Flex';
export const PredicateEditor = (props) => {
    const baseClassName = 'ab-PredicateEditor';
    const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
        value: item.id,
        label: item.label,
        inputs: item.inputs,
    })), [props.predicateDefs, props.onChange]);
    const handlePredicateInputChange = (e, index) => {
        const { value } = e.target;
        const newInputs = [...(props.predicate.Inputs ?? [])];
        newInputs[index] = value;
        props.onChange({
            ...props.predicate,
            Inputs: newInputs,
        });
    };
    const handlePredicateValuesChange = (inputs) => {
        props.onChange({
            ...props.predicate,
            Inputs: inputs,
        });
    };
    const currentPredicateDef = props?.predicateDefs?.find((item) => item.id === props.predicate?.PredicateId);
    let icon = null;
    if (currentPredicateDef) {
        if (isAdaptableSystemIcon(currentPredicateDef?.icon)) {
            icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
        }
        else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
            icon = React.createElement("span", null, currentPredicateDef.icon.text);
        }
    }
    const adaptable = useAdaptable();
    const columnId = props.columnId;
    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
    const searchValueRef = React.useRef('');
    const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = useDistinctFilterColumnValues({
        columnId,
        searchValueRef,
    });
    const quickFilterValuesRef = React.useRef(quickFilterValues);
    quickFilterValuesRef.current = quickFilterValues;
    useEffect(triggerValuesLoad, []);
    const onMenuOpen = () => {
        triggerValuesLoad();
    };
    const onInputChange = React.useCallback((value) => {
        searchValueRef.current = value;
        const quickFilterValues = quickFilterValuesRef.current;
        if (quickFilterValues.searchValueUsedInFilterValue || quickFilterValues.skipDefaultSearch) {
            triggerValuesLoad();
        }
    }, []);
    const { skipDefaultSearch } = quickFilterValues;
    return (React.createElement(Box, { className: baseClassName },
        React.createElement(Flex, { alignItems: "center", className: "twa:justify-stretch" },
            icon && React.createElement(Tag, { className: "twa:mr-2" }, icon),
            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
                    const option = predicateDefsOptions.find((x) => x.value === value);
                    props.onChange({
                        ...props.predicate,
                        PredicateId: option?.value,
                        Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
                    });
                } })),
        React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
            index > 0 && React.createElement(HelpBlock, { className: "twa:m-2" }, "AND"),
            React.createElement(Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { className: "twa:mt-2" },
            React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                    onMenuOpen,
                    onInputChange,
                    skipDefaultFiltering: skipDefaultSearch,
                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
};
