"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PredicateEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Icon_1 = require("../../../components/Icon");
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Tag_1 = require("../../../components/Tag");
const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
const Select_1 = require("../../../components/Select");
const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
const AdaptableContext_1 = require("../../AdaptableContext");
const FloatingFilterValues_1 = require("../ColumnFilter/components/FloatingFilterValues");
const react_1 = require("react");
const Flex_1 = require("../../../components/Flex");
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 ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef?.icon)) {
            icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
        }
        else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
            icon = React.createElement("span", null, currentPredicateDef.icon.text);
        }
    }
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const columnId = props.columnId;
    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
    const searchValueRef = React.useRef('');
    const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = (0, FloatingFilterValues_1.useDistinctFilterColumnValues)({
        columnId,
        searchValueRef,
    });
    const quickFilterValuesRef = React.useRef(quickFilterValues);
    quickFilterValuesRef.current = quickFilterValues;
    (0, react_1.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(Flex_1.Box, { className: baseClassName },
        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch" },
            icon && React.createElement(Tag_1.Tag, { className: "twa:mr-2" }, icon),
            React.createElement(Select_1.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_1.Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
            index > 0 && React.createElement(HelpBlock_1.default, { className: "twa:m-2" }, "AND"),
            React.createElement(Flex_1.Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
                React.createElement(AdaptableInput_1.default, { "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(Flex_1.Box, { className: "twa:mt-2" },
            React.createElement(ListBoxFilterForm_1.ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                    onMenuOpen,
                    onInputChange,
                    skipDefaultFiltering: skipDefaultSearch,
                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
};
exports.PredicateEditor = PredicateEditor;
