import { jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { ArrayFieldComponent, connect, useField } from "@tachybase/schema";
import { CloseCircleOutlined } from "@ant-design/icons";
import { Select, Space } from "antd";
import { Trans, useTranslation } from "react-i18next";
import { useToken } from "../__builtins__/index.mjs";
import { FilterLogicContext, RemoveConditionContext } from "./context.mjs";
import { FilterItems } from "./FilterItems.mjs";
const FilterGroup = connect((props)=>{
    const { bordered = true, disabled } = props;
    const field = useField();
    const remove = useContext(RemoveConditionContext);
    const { t } = useTranslation();
    const { token } = useToken();
    const keys = Object.keys(field.value || {});
    const logic = keys.includes('$or') ? '$or' : '$and';
    const setLogic = (value)=>{
        const obj = field.value || {};
        field.value = {
            [value]: [
                ...obj[logic] || []
            ]
        };
    };
    const mergedDisabled = disabled || field.disabled;
    return /*#__PURE__*/ jsx(FilterLogicContext.Provider, {
        value: logic,
        children: /*#__PURE__*/ jsxs("div", {
            style: bordered ? {
                position: 'relative',
                border: "1px dashed ".concat(token.colorBorder),
                padding: token.paddingSM,
                marginBottom: token.marginXS
            } : {
                position: 'relative',
                marginBottom: token.marginXS
            },
            children: [
                remove && !mergedDisabled && /*#__PURE__*/ jsx("a", {
                    role: "button",
                    "aria-label": "icon-close",
                    children: /*#__PURE__*/ jsx(CloseCircleOutlined, {
                        style: {
                            position: 'absolute',
                            right: 10,
                            top: 10,
                            color: '#bfbfbf'
                        },
                        onClick: ()=>remove()
                    })
                }),
                /*#__PURE__*/ jsx("div", {
                    style: {
                        marginBottom: 8,
                        color: token.colorText
                    },
                    children: /*#__PURE__*/ jsxs(Trans, {
                        children: [
                            'Meet ',
                            /*#__PURE__*/ jsxs(Select, {
                                role: "button",
                                "data-testid": "filter-select-all-or-any",
                                style: {
                                    width: 'auto'
                                },
                                value: logic,
                                onChange: (value)=>{
                                    setLogic(value);
                                },
                                children: [
                                    /*#__PURE__*/ jsx(Select.Option, {
                                        value: '$and',
                                        children: "All"
                                    }),
                                    /*#__PURE__*/ jsx(Select.Option, {
                                        value: '$or',
                                        children: "Any"
                                    })
                                ]
                            }),
                            ' conditions in the group'
                        ]
                    })
                }),
                /*#__PURE__*/ jsx("div", {
                    children: /*#__PURE__*/ jsx(ArrayFieldComponent, {
                        name: logic,
                        component: [
                            FilterItems
                        ],
                        disabled: mergedDisabled
                    })
                }),
                !mergedDisabled && /*#__PURE__*/ jsxs(Space, {
                    size: 16,
                    style: {
                        marginTop: 8,
                        marginBottom: 8
                    },
                    children: [
                        /*#__PURE__*/ jsx("a", {
                            onClick: ()=>{
                                const value = field.value || {};
                                const items = value[logic] || [];
                                items.push({});
                                field.value = {
                                    [logic]: items
                                };
                            },
                            children: t('Add condition')
                        }),
                        /*#__PURE__*/ jsx("a", {
                            onClick: ()=>{
                                const value = field.value || {};
                                const items = value[logic] || [];
                                items.push({
                                    $and: [
                                        {}
                                    ]
                                });
                                field.value = {
                                    [logic]: items
                                };
                            },
                            children: t('Add condition group')
                        })
                    ]
                })
            ]
        })
    });
});
export { FilterGroup };
