import * as React from 'react';
import { NewScopeComponent } from '../../Components/NewScopeComponent';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Flex } from '../../../components/Flex';
import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
export const FlashingAlertScopeWizardSection = (props) => {
    const { data, api } = useOnePageAdaptableWizardContext();
    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
        React.createElement(NewScopeComponent, { descriptions: {
                rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                columnScope: 'Changes in selected columns will trigger an Flashing Cell',
            }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
                const newData = { ...data, Scope };
                if (newData.Rule.Predicates) {
                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
                    newData.Rule = {
                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
                            if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
                            }
                            return true;
                        }),
                    };
                }
                props.onChange(newData);
            } })));
};
