import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { BooleanComparisonOperator, DateComparisonOperator, FilterCompareType, NumericComparisonOperator, StringComparisonOperator } from '@data-wrangling-components/core';
import { DataType } from '@essex/arquero';
import { IconButton, SpinButton } from '@fluentui/react';
import { memo, useCallback, useMemo, useState } from 'react';
import { CalendarPicker, ColumnCriteriaCombobox, EnumDropdown } from '../../controls/index.js';
import { useSimpleDropdownOptions, useTableColumnNames } from '../../hooks/index.js';
import { InputExplainer } from '../../styles.js';
import { useColumnTyping, useIsEmpty } from './FilterFunction.hooks.js';
import { BooleanToggle, Container, FilterContainer, leftStyles, OrLabel, SideBySide, spinStyles, TextValue } from './FilterFunction.styles.js';
/**
 * Just the comparison logic/ops for a filter.
 * Input table and source column is expected to be edited elsewhere and configured as the step input.
 * This is split out from FilterInputs to allow just the comparison logic to be reused elsewhere.
 */ export const FilterFunction = /*#__PURE__*/ memo(function FilterFunction({ table , column , criterion , onChange , suppressLabels =false ,  }) {
    const handleOpChange = useCallback((_e, opt)=>{
        onChange && onChange({
            ...criterion,
            operator: opt?.key
        });
    }, [
        criterion,
        onChange
    ]);
    const onSelectDate = useCallback((date)=>{
        const update = {
            ...criterion,
            type: FilterCompareType.Value,
            value: date
        };
        onChange && onChange(update);
        setCleanLabel(false);
    }, [
        criterion,
        onChange
    ]);
    const handleDateComboBoxChange = useCallback((_e, option, _index, value)=>{
        const update = {
            ...criterion,
            type: FilterCompareType.Column,
            value: option ? option.key : value
        };
        onChange?.(update);
        setCleanLabel(true);
    }, [
        criterion,
        onChange
    ]);
    const handleComboBoxChange = useCallback((_e, option, _index, value)=>{
        const update = {
            ...criterion,
            type: FilterCompareType.Column,
            value: option ? option.key : value
        };
        onChange?.(update);
    }, [
        criterion,
        onChange
    ]);
    const onChangeTextFieldValue = useCallback((_event, newValue)=>{
        const update = {
            ...criterion,
            type: FilterCompareType.Value,
            value: newValue
        };
        onChange?.(update);
    }, [
        criterion,
        onChange
    ]);
    const spinButtonOnChange = useCallback((_event, newValue)=>{
        if (newValue !== undefined) {
            const update = {
                ...criterion,
                type: FilterCompareType.Value,
                value: newValue
            };
            onChange?.(update);
        }
    }, [
        criterion,
        onChange
    ]);
    const onToggleChange = (_ev, checked)=>{
        const update = {
            ...criterion,
            type: FilterCompareType.Value,
            value: checked
        };
        onChange?.(update);
    };
    const { type , columnFilter  } = useColumnTyping(table, column);
    const [cleanLabel, setCleanLabel] = useState(false);
    const operatorDropdown = useMemo(()=>{
        const shared = {
            required: !suppressLabels,
            label: suppressLabels ? undefined : 'Function',
            selectedKey: criterion.operator,
            onChange: handleOpChange,
            styles: leftStyles
        };
        if (column) {
            if (type === DataType.String) {
                return /*#__PURE__*/ _jsx(EnumDropdown, {
                    enumeration: StringComparisonOperator,
                    ...shared
                });
            } else if (type === DataType.Boolean) {
                return /*#__PURE__*/ _jsx(EnumDropdown, {
                    enumeration: BooleanComparisonOperator,
                    ...shared
                });
            } else if (type === DataType.Date) {
                return /*#__PURE__*/ _jsx(EnumDropdown, {
                    enumeration: DateComparisonOperator,
                    ...shared
                });
            }
        }
        // map to nicer "math like" terse labels for numeric operations
        // (the default will use the friendly enum keys)
        const labels = {
            '=': '=',
            '!=': '!=',
            '<': '<',
            '<=': '<=',
            '>': '>',
            '>=': '>='
        };
        return /*#__PURE__*/ _jsx(EnumDropdown, {
            enumeration: NumericComparisonOperator,
            ...shared,
            labels: labels
        });
    }, [
        type,
        column,
        criterion,
        handleOpChange,
        suppressLabels
    ]);
    const isEmpty = useIsEmpty(criterion);
    const handleDeleteClick = useCallback(()=>onChange?.(), [
        onChange
    ]);
    const columns = useTableColumnNames(table, columnFilter);
    const columnOptions = useSimpleDropdownOptions(columns);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsxs(SideBySide, {
                children: [
                    operatorDropdown,
                    /*#__PURE__*/ _jsxs(FilterContainer, {
                        children: [
                            type === DataType.Date ? /*#__PURE__*/ _jsx(CalendarPicker, {
                                onSelectDate: onSelectDate,
                                disabled: isEmpty,
                                cleanLabel: cleanLabel
                            }) : null,
                            type === DataType.String ? /*#__PURE__*/ _jsx(TextValue, {
                                onChange: onChangeTextFieldValue,
                                disabled: isEmpty
                            }) : null,
                            type === DataType.Number ? /*#__PURE__*/ _jsx(SpinButton, {
                                min: 0,
                                step: 1,
                                value: criterion.value,
                                styles: spinStyles,
                                disabled: isEmpty,
                                onChange: spinButtonOnChange
                            }) : null,
                            type === DataType.Boolean ? /*#__PURE__*/ _jsx(BooleanToggle, {
                                defaultChecked: true,
                                onText: "True",
                                offText: "False",
                                onChange: onToggleChange,
                                disabled: isEmpty
                            }) : null,
                            /*#__PURE__*/ _jsx(OrLabel, {
                                children: "or"
                            }),
                            type === DataType.Date ? /*#__PURE__*/ _jsx(ColumnCriteriaCombobox, {
                                options: columnOptions,
                                onChange: handleDateComboBoxChange,
                                disabled: isEmpty
                            }) : /*#__PURE__*/ _jsx(ColumnCriteriaCombobox, {
                                options: columnOptions,
                                onChange: handleComboBoxChange,
                                disabled: isEmpty
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx(IconButton, {
                        title: 'Remove this criterion',
                        iconProps: {
                            iconName: 'Delete'
                        },
                        onClick: handleDeleteClick
                    })
                ]
            }),
            type === DataType.String ? /*#__PURE__*/ _jsx(InputExplainer, {
                children: "String comparisons are not case-sensitive"
            }) : null
        ]
    });
});
