import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useCallback, useMemo } from 'react';
import { Badge, Item, Select, Space, Switch, Tag, tasty, Text, TooltipProvider, } from '@cube-dev/ui-kit';
import { useDeepMemo, useEvent } from '../hooks';
import { OPERATOR_LABELS, OPERATORS, OPERATORS_BY_TYPE, UNARY_OPERATORS } from '../values';
import { ValuesInput } from './ValuesInput';
import { TimeDateRangeSelector } from './TimeDateRangeSelector';
import { TimeDateSelector } from './TimeDateSelector';
import { FilterLabel } from './FilterLabel';
import { FilterOptionsButton } from './FilterOptionsButton';
const MemberFilterElement = tasty(Space, {
    qa: 'MemberFilter',
    styles: {
        gap: '1x',
        placeItems: 'start',
        radius: true,
        fill: {
            '': '#clear',
            ':has([data-qa="FilterOptionsButton"][data-is-hovered])': '#light',
        },
        margin: '-.5x',
        padding: '.5x',
        width: 'max-content',
        InnerContainer: {
            display: 'flex',
            flow: 'row',
            gap: '1x',
            placeItems: 'start',
        },
        MemberContainer: {
            display: 'flex',
            flow: 'row',
            flexShrink: 0,
            gap: '1x',
            placeItems: 'center start',
        },
    },
});
const ValueTag = tasty(Tag, {
    styles: {
        padding: '.625x .75x',
        preset: 't3',
        fill: '#light',
    },
});
function OperatorSelector(props) {
    const { value, isDisabled, type, onChange } = props;
    return (_jsx(Select, { isDisabled: isDisabled, "aria-label": "Filter operator", size: "small", listBoxStyles: { height: 'auto' }, selectedKey: value, onSelectionChange: (operator) => onChange(operator), children: OPERATORS_BY_TYPE[type || 'all']?.map((operator) => {
            return (_jsx(Item, { textValue: OPERATOR_LABELS[operator], children: _jsx(Text, { preset: "t3m", children: OPERATOR_LABELS[operator] }) }, operator));
        }) }));
}
export function FilterMember(props) {
    const { filter, memberType, isCompact, isExtraCompact = false, isMissing, type, cubeName, cubeTitle, memberName, memberTitle, memberViewType, onRemove, onChange, } = props;
    const onOperatorChange = useEvent((operator) => {
        const updatedFilter = {
            values: [],
            ...filter,
            operator: operator,
        };
        if (type === 'time') {
            updatedFilter.values = [];
        }
        if (['set', 'notSet'].includes(operator)) {
            delete updatedFilter.values;
        }
        if (['equals', 'notEquals'].includes(operator) && type === 'boolean') {
            updatedFilter.values = ['true'];
        }
        onChange(updatedFilter);
    });
    const onValuesChange = useEvent((values) => {
        onChange({ ...filter, values: values });
    });
    const wrapFilter = useEvent((type) => {
        onChange({ [type]: [filter] });
    });
    const inputs = useDeepMemo(() => {
        const operator = filter.operator;
        if (!('member' in filter) ||
            UNARY_OPERATORS.includes(filter.operator) ||
            !OPERATORS.includes(filter.operator)) {
            return null;
        }
        const allowSuggestions = type === 'string' && (operator === 'equals' || operator === 'notEquals');
        switch (type) {
            case 'number':
            case 'string':
                return (_jsx(ValuesInput, { memberName: 'member' in filter ? filter.member : undefined, memberType: memberType, allowSuggestions: allowSuggestions, isCompact: isExtraCompact, type: type === 'number' ? 'number' : 'string', values: filter.values || [], onChange: onValuesChange }, operator));
            case 'boolean':
                return (_jsx(Switch, { margin: ".5x top", isSelected: filter.values?.[0] === 'true', onChange: (value) => onValuesChange(value ? ['true'] : ['false']) }));
            case 'time':
                if (filter.operator.includes('Range')) {
                    return (_jsx(TimeDateRangeSelector, { value: filter.values || [], onChange: onValuesChange }, filter.operator));
                }
                else if (filter.operator.includes('Date')) {
                    return (_jsx(TimeDateSelector, { value: filter.values?.[0], onChange: (val) => {
                            onValuesChange([val]);
                        } }, filter.operator));
                }
                else {
                    return (_jsx(ValuesInput, { memberName: 'member' in filter ? filter.member : undefined, memberType: memberType, allowSuggestions: allowSuggestions, placeholder: "Date/time in ISO 8601", type: "string", values: filter.values || [], onChange: onValuesChange }, filter.operator));
                }
            default:
                return filter.values?.map((value, i) => {
                    return _jsx(ValueTag, { children: value }, i);
                });
        }
    }, [filter, type]);
    const ElementWrapper = useMemo(() => (isExtraCompact ? Fragment : MemberFilterElement), [isExtraCompact]);
    const InnerContainer = useCallback(({ children }) => {
        if (isExtraCompact) {
            return _jsx(_Fragment, { children: children });
        }
        return _jsx("div", { "data-element": "InnerContainer", children: children });
    }, [isExtraCompact]);
    const MemberContainer = useCallback(({ children }) => {
        if (isExtraCompact) {
            return _jsx(_Fragment, { children: children });
        }
        return _jsx("div", { "data-element": "MemberContainer", children: children });
    }, [isExtraCompact]);
    const onAction = useEvent((key) => {
        switch (key) {
            case 'remove':
                onRemove();
                break;
            case 'wrapWithAnd':
                wrapFilter('and');
                break;
            case 'wrapWithOr':
                wrapFilter('or');
                break;
        }
    });
    return (_jsxs(ElementWrapper, { children: [_jsx(FilterOptionsButton, { type: "member", onAction: onAction }), _jsx(InnerContainer, { children: 'and' in filter || 'or' in filter ? (_jsx(_Fragment, { children: _jsx(TooltipProvider, { activeWrap: true, "aria-label": "UNSUPPORTED OPERATOR", title: JSON.stringify(filter), children: _jsx(Badge, { type: "disabled", children: "UNSUPPORTED OPERATOR..." }) }) })) : (_jsxs(_Fragment, { children: [_jsxs(MemberContainer, { children: ['member' in filter && filter.member ? (_jsx(FilterLabel, { isCompact: isCompact, isMissing: isMissing, member: memberType, memberName: memberName, memberTitle: memberTitle, cubeName: cubeName, cubeTitle: cubeTitle, memberViewType: memberViewType, type: type, name: filter.member })) : null, _jsx(OperatorSelector, { isDisabled: !type || ('operator' in filter && !OPERATORS.includes(filter.operator)), type: type, value: 'operator' in filter ? filter.operator : undefined, onChange: onOperatorChange })] }), isExtraCompact ? inputs : _jsx("div", { children: inputs })] })) })] }));
}
//# sourceMappingURL=FilterMember.js.map