import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Flex, tasty } from '@cube-dev/ui-kit';
import { useEvent } from '../hooks';
import { useQueryBuilderContext } from '../context';
import { FilterMember } from './FilterMember';
import { AddFilterInput } from './AddFilterInput';
import { FilterOptionsButton } from './FilterOptionsButton';
const LogicalOperatorContainer = tasty({
    qa: 'LogicalFilter',
    styles: {
        display: 'grid',
        gridColumns: 'min-content min-content 1fr',
        gap: '.5x',
        placeItems: 'center start',
        radius: true,
        fill: {
            '': '#clear',
            ':has(>[data-qa="FilterOptionsButton"][data-is-hovered])': '#light',
        },
        margin: '-.5x',
        padding: '.5x',
        width: 'max-content',
    },
});
const LogicalOperatorButton = tasty({
    styles: {
        display: 'grid',
        gridRows: '1fr auto 1fr',
        placeItems: 'stretch center',
        placeSelf: 'stretch',
        flow: 'column',
        preset: 'c2',
        color: '#dark-03',
        width: '3.5x',
        '&::before': {
            content: '""',
            width: '1ow',
            fill: '#dark.2',
            radius: 'top',
        },
        '&::after': {
            content: '""',
            width: '1ow',
            fill: '#dark.2',
            radius: 'bottom',
        },
    },
});
export function LogicalFilter(props) {
    const { isCompact, onChange, isAddingCompact, onRemove, onUnwrap, type, values } = props;
    const { members, memberViewType, cubes } = useQueryBuilderContext();
    function getMemberType(member) {
        if (!member?.name) {
            return undefined;
        }
        if (members.measures[member.name]) {
            return 'measure';
        }
        if (members.dimensions[member.name]) {
            return 'dimension';
        }
        return undefined;
    }
    const filters = [...values];
    const changeValues = (filters) => {
        onChange({ [type]: filters });
    };
    const removeFilter = (index) => {
        filters.splice(index, 1);
        changeValues(filters);
    };
    const updateFilter = (index, filter) => {
        filters[index] = filter;
        changeValues(filters);
    };
    const wrapFilter = useEvent((type) => {
        onChange({ [type]: [{ [type]: values }] });
    });
    const unwrapFilter = (index) => {
        const filter = filters[index];
        if ('and' in filter) {
            filters.splice(index, 1, ...filter.and);
        }
        if ('or' in filter) {
            filters.splice(index, 1, ...filter.or);
        }
        changeValues(filters);
    };
    const convert = () => {
        if (type === 'and') {
            onChange({ or: filters });
        }
        else {
            onChange({ and: filters });
        }
    };
    const onFilterAction = useEvent((key) => {
        switch (key) {
            case 'remove':
                onRemove();
                break;
            case 'unwrap':
                onUnwrap();
                break;
            case 'convert':
                convert();
                break;
            case 'wrapWithAnd':
                wrapFilter('and');
                break;
            case 'wrapWithOr':
                wrapFilter('or');
                break;
        }
    });
    return (_jsxs(LogicalOperatorContainer, { children: [_jsx(FilterOptionsButton, { type: type, disableKeys: !values.length ? ['unwrap'] : undefined, onAction: onFilterAction }), _jsx(LogicalOperatorButton, { children: type }), _jsxs(Flex, { flow: "column", gap: "1x", children: [filters.map((filter, index) => {
                        if ('and' in filter) {
                            return (_jsx(LogicalFilter, { type: "and", values: filter.and, isCompact: isCompact, isAddingCompact: isAddingCompact, onRemove: () => {
                                    removeFilter(index);
                                }, onChange: (filter) => {
                                    updateFilter(index, filter);
                                }, onUnwrap: () => {
                                    unwrapFilter(index);
                                } }, index));
                        }
                        if ('or' in filter) {
                            return (_jsx(LogicalFilter, { type: "or", values: filter.or, isCompact: isCompact, isAddingCompact: isAddingCompact, onRemove: () => {
                                    removeFilter(index);
                                }, onChange: (filter) => {
                                    updateFilter(index, filter);
                                }, onUnwrap: () => {
                                    unwrapFilter(index);
                                } }, index));
                        }
                        if (!('member' in filter) || !filter.member) {
                            return null;
                        }
                        const member = members.measures[filter.member] || members.dimensions[filter.member];
                        const memberFullName = filter.member;
                        const cubeName = memberFullName.split('.')[0];
                        const cube = cubes.find((cube) => cube.name === cubeName);
                        const memberName = memberFullName.split('.')[1];
                        return (_jsx(FilterMember, { isMissing: !member, isCompact: isCompact, filter: filter, memberName: memberName, memberTitle: member?.shortTitle, cubeName: cubeName, cubeTitle: cube?.title, memberViewType: memberViewType, memberType: getMemberType(member), type: member?.type, onRemove: () => {
                                removeFilter(index);
                            }, onChange: (updatedFilter) => {
                                updateFilter(index, updatedFilter);
                            } }, index));
                    }), _jsx(AddFilterInput, { isCompact: isAddingCompact, onAdd: (filter) => {
                            changeValues([...filters, filter]);
                        } })] })] }));
}
//# sourceMappingURL=LogicalFilter.js.map