/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BooleanOperator } from '@datashaper/schema';
import { EnumDropdown } from '@essex/components';
import { ActionButton, Label } from '@fluentui/react';
import { memo, useCallback } from 'react';
import { useDropdownChangeHandler, useStepDataTable } from '../hooks/index.js';
import { LeftAlignedRow } from '../styles.js';
import { Container, Vertical } from './Filter.styles.js';
import { FilterFunction } from './shared/index.js';
/**
 * Provides inputs for a Filter step.
 */ export const Filter = /*#__PURE__*/ memo(function Filter({ step , workflow , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, workflow, input, table);
    const handleButtonClick = useCallback(()=>{
        onChange?.({
            ...step,
            args: {
                ...step.args,
                criteria: [
                    ...step.args.criteria || [],
                    {}
                ]
            }
        });
    }, [
        step,
        onChange
    ]);
    const handleFilterChange = useCallback((criterion, index)=>{
        const criteria = [
            ...step.args.criteria
        ];
        if (criterion === undefined) {
            criteria.splice(index, 1);
        } else {
            criteria[index] = criterion;
        }
        onChange?.({
            ...step,
            args: {
                ...step.args,
                criteria
            }
        });
    }, [
        step,
        onChange
    ]);
    const handleLogicalChange = useDropdownChangeHandler(step, (s, val)=>s.args.logical = val, onChange);
    const filters = useFilters(dataTable, step.args.column, step.args.criteria, handleFilterChange);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(Label, {
                children: "Function"
            }),
            filters,
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: addIconProps,
                disabled: !dataTable,
                children: "Add criteria"
            }),
            step.args.criteria.length > 1 ? /*#__PURE__*/ _jsx(LeftAlignedRow, {
                children: /*#__PURE__*/ _jsx(EnumDropdown, {
                    label: 'Logical combination',
                    placeholder: 'Choose boolean',
                    enumeration: BooleanOperator,
                    labels: {
                        or: 'OR',
                        and: 'AND',
                        nor: 'NOR',
                        nand: 'NAND',
                        xor: 'XOR'
                    },
                    selectedKey: step.args.logical,
                    onChange: handleLogicalChange
                })
            }) : null
        ]
    });
});
function useFilters(table, column, criteria, onChange) {
    if (!table) {
        return null;
    }
    return criteria.map((criterion, index)=>{
        const handleChange = (f)=>onChange(f, index);
        return /*#__PURE__*/ _jsx(Vertical, {
            index: index,
            children: /*#__PURE__*/ _jsx(FilterFunction, {
                table: table,
                column: column,
                criterion: criterion,
                onChange: handleChange
            })
        }, `filter-function-${index}`);
    });
}
const addIconProps = {
    iconName: 'Add'
};
