import * as React from 'react';
import { Box, Flex } from 'rebass';
import DropdownButton from '../../../../components/DropdownButton';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import SimpleButton from '../../../../components/SimpleButton';
import { useAdaptable } from '../../../AdaptableContext';
import { PredicateEditor } from '../../PredicateEditor/PredicateEditor';
export const EntityRulePredicateEditor = (props) => {
    const { api } = useAdaptable();
    const { predicate } = props;
    const allColumns = React.useMemo(() => {
        return api.columnApi.getColumns().map((column) => ({
            label: column.friendlyName,
            value: column.columnId,
        }));
    }, []);
    const handleClear = () => {
        const newPredicates = props.data.Rule?.Predicates?.filter((prevPredicate) => prevPredicate !== predicate);
        props.onChange({
            ...props.data,
            Rule: {
                Predicates: newPredicates,
            },
        });
    };
    const handlePredicateChange = (newPredicateDef) => {
        let newPredicates = [];
        if (predicate) {
            newPredicates = props.data.Rule?.Predicates?.map((prevPredicate) => {
                if (prevPredicate === predicate) {
                    return newPredicateDef;
                }
                return prevPredicate;
            });
        }
        else {
            // no previous predicate, e.g. it was cleared
            newPredicates = [newPredicateDef];
        }
        props.onChange({
            ...props.data,
            Rule: {
                Predicates: newPredicates,
            },
        });
    };
    const predicateDefs = React.useMemo(() => {
        let preparedPredicates = [];
        if (props.getPredicateDefsForColId && props?.predicate?.ColumnId) {
            preparedPredicates = props.getPredicateDefsForColId(props.predicate.ColumnId);
        }
        else {
            preparedPredicates = props.predicateDefs;
        }
        return preparedPredicates;
    }, [props.predicate]);
    const columnIdPredicateScopeEnabled = Boolean(props.columnPredicateEnabled);
    const columnFriendlyName = allColumns.find((col) => col.value === predicate?.ColumnId)?.label;
    const columnOptions = allColumns.map((col) => ({
        label: col.label,
        onClick: () => {
            handlePredicateChange({ PredicateId: null, ColumnId: col.value, Inputs: [] });
        },
    }));
    // use global scope or custom scope
    let predicateColumnId = null;
    if (predicate?.ColumnId && predicate.ColumnId !== '') {
        predicateColumnId = predicate.ColumnId;
    }
    else if ('ColumnIds' in props.data.Scope && props.data.Scope?.ColumnIds?.[0]) {
        predicateColumnId = props.data.Scope?.ColumnIds?.[0];
    }
    return (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
        React.createElement(Box, { flex: 1 },
            React.createElement(FormLayout, null,
                columnIdPredicateScopeEnabled && (React.createElement(FormRow, { label: "Column" },
                    React.createElement(DropdownButton, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName ?? 'Select Column'))),
                React.createElement(FormRow, { label: "Predicate" },
                    React.createElement(PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
        React.createElement(Box, null,
            React.createElement(SimpleButton, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
};
