"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConditionPanel = ConditionPanel;
const i18n_1 = __importDefault(require("../../../../../../locales/i18n.js"));
const react_1 = __importStar(require("react"));
const react_dom_1 = require("react-dom");
const classnames_1 = __importDefault(require("classnames"));
const cn_ui_1 = require("@cainiaofe/cn-ui");
const core_1 = require("@dnd-kit/core");
const sortable_1 = require("@dnd-kit/sortable");
const mobx_react_simpler_1 = require("../../../../../../utils/mobx-react-simpler/index.js");
const floating_layer_1 = require("../../../../../../utils/floating-layer.js");
const toolbar_divider_1 = require("../toolbar-divider");
const use_ai_table_icons_1 = require("../../../../../../cn-ai-table/view/hooks/use-ai-table-icons");
const sortable_condition_item_1 = require("./sortable-condition-item");
/** Portal DragOverlay 到 body，避免被父级 filter/overflow/transform 等形成的包含块截断 */
function PortaledDragOverlay({ children, ...props }) {
    return (0, react_dom_1.createPortal)(react_1.default.createElement(core_1.DragOverlay, { ...props }, children), document.body);
}
/**
 * 条件设置面板公共组件
 * 用于筛选、排序、分组、填色等条件设置场景。
 *
 * 拖拽排序基于 @dnd-kit 实现：
 * - MouseSensor / TouchSensor 均设 distance: 5 激活阈值，防止点击误触
 * - 仅把手区域（drag-handle）响应拖拽，不干扰内部下拉框、输入框等控件
 * - DragOverlay 提供拖拽中的浮层预览
 */
function ConditionPanel(props) {
    const { trigger, title, conditions, addButtonText, onAdd, onRemove, onReorder, renderConditionItem, keepVisible = false, maxConditions, placement = 'bl', offset = [0, 10], viewId, currentPageHintText, showAndBeforeCondition = false, showDivider = true, visible: controlledVisible, onVisibleChange: onVisibleChangeProp, shouldOpen, getItemId, popupClassName, } = props;
    // ─── 面板可见性状态（支持受控 & 非受控） ───
    const [internalVisible, setInternalVisible] = (0, react_1.useState)(false);
    const isControlled = controlledVisible !== undefined && onVisibleChangeProp !== undefined;
    const visible = isControlled ? controlledVisible : internalVisible;
    const setVisible = isControlled ? onVisibleChangeProp : setInternalVisible;
    const icons = (0, use_ai_table_icons_1.useAiTableIcons)();
    const keepVisibleRef = (0, react_1.useRef)(keepVisible);
    keepVisibleRef.current = keepVisible;
    const deferCloseRef = (0, react_1.useRef)(null);
    const dataModel = (0, mobx_react_simpler_1.useModel)('dataModel');
    // ─── dnd-kit 拖拽配置 ───
    const [activeId, setActiveId] = (0, react_1.useState)(null);
    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, { activationConstraint: { distance: 5 } }), (0, core_1.useSensor)(core_1.TouchSensor, { activationConstraint: { distance: 5 } }));
    // 由 conditions 派生 ID:优先用调用方提供的稳定 id,fallback 到 index。
    // fallback 仅适用于不启用拖拽的场景(filter/group/color-fill);启用拖拽时
    // 调用方应实现 getItemId,否则中间项删除/重排会触发子组件重新挂载。
    const sortableIds = react_1.default.useMemo(() => conditions.map((c, i) => (getItemId ? getItemId(c, i) : String(i))), [conditions, getItemId]);
    // ─── 面板可见性副作用 ───
    // keepVisible 变化时同步面板状态（通知栏场景：保存/取消后关闭）
    (0, react_1.useEffect)(() => {
        if (keepVisible) {
            setVisible(true);
        }
        else {
            setVisible(false);
        }
    }, [keepVisible]);
    // 视图切换时关闭面板
    react_1.default.useEffect(() => {
        if (viewId && dataModel.activeViewId !== viewId) {
            setVisible(false);
        }
    }, [dataModel.activeViewId, viewId]);
    // 视图选择器打开时关闭面板
    react_1.default.useEffect(() => {
        if (!visible)
            return;
        const checkViewTypeSelector = () => {
            const viewTypeSelector = document.querySelector('.view-type-selector');
            if (viewTypeSelector === null || viewTypeSelector === void 0 ? void 0 : viewTypeSelector.offsetParent) {
                setVisible(false);
            }
        };
        const intervalId = setInterval(checkViewTypeSelector, 100);
        return () => clearInterval(intervalId);
    }, [visible]);
    const handleVisibleChange = (newVisible) => {
        if (newVisible) {
            if (deferCloseRef.current) {
                clearTimeout(deferCloseRef.current);
                deferCloseRef.current = null;
            }
            if (shouldOpen && !shouldOpen()) {
                cn_ui_1.CnMessage.warning(i18n_1.default.get({
                    id: 'PleaseConfigureDataInTheFieldMap_1368328697',
                    dm: '请先在编辑态的字段映射中配置数据',
                }));
                return;
            }
            setVisible(true);
            return;
        }
        if (keepVisible) {
            return;
        }
        // portaled 下拉关闭时 CnPopup 先触发 false，子 onChange 稍后才将 keepVisible 置 true。
        // 延迟一个 tick 再判定，避免与 keepVisible effect 打架产生闪烁。
        if (deferCloseRef.current) {
            clearTimeout(deferCloseRef.current);
        }
        deferCloseRef.current = setTimeout(() => {
            deferCloseRef.current = null;
            if (!keepVisibleRef.current) {
                setVisible(false);
            }
        }, 0);
    };
    // 点击外部区域关闭面板（排除：面板自身、通知栏、下拉选择框、trigger 按钮等受保护区域）
    react_1.default.useEffect(() => {
        if (!visible)
            return;
        const handleClickOutside = (event) => {
            const target = event.target;
            const tabItem = target.closest('[class*="cn-tab-item"]');
            const addViewButton = tabItem === null || tabItem === void 0 ? void 0 : tabItem.querySelector('[class*="add"]');
            const viewTypeSelector = document.querySelector('.view-type-selector');
            if ((addViewButton && tabItem) || (viewTypeSelector === null || viewTypeSelector === void 0 ? void 0 : viewTypeSelector.offsetParent)) {
                if (!keepVisible) {
                    setVisible(false);
                }
                return;
            }
            if (target.closest('.condition-popup') ||
                target.closest('[class*="cn-popup"]') ||
                target.closest('.date-filter-popup-wrapper') ||
                target.closest('.date-filter-popup') ||
                target.closest('[class*="toolbar-btn"]') ||
                target.closest('[class*="toolbar-notification"]') ||
                target.closest('[class*="cn-select-dropdown"]') ||
                // CnAsyncSelect 等使用 cn-next Menu，选项节点为 cn-next-menu-item-text，不在 cn-select-dropdown 下
                target.closest('[class*="cn-next-menu"]') ||
                target.closest('.field-select-popup')) {
                return;
            }
            if (!keepVisible) {
                setVisible(false);
            }
        };
        // 延迟绑定，避免本次点击立即触发关闭
        const timer = setTimeout(() => {
            document.addEventListener('mousedown', handleClickOutside, true);
        }, 100);
        return () => {
            clearTimeout(timer);
            document.removeEventListener('mousedown', handleClickOutside, true);
        };
    }, [visible, keepVisible]);
    // ─── 业务回调 ───
    const handleAdd = () => {
        if (maxConditions && conditions.length >= maxConditions) {
            return;
        }
        onAdd();
    };
    // ─── 拖拽回调 ───
    const handleDragStart = (event) => {
        setActiveId(event.active.id);
    };
    const handleDragEnd = (event) => {
        const { active, over } = event;
        setActiveId(null);
        if (!over || active.id === over.id || !onReorder)
            return;
        const fromIndex = sortableIds.indexOf(active.id);
        const toIndex = sortableIds.indexOf(over.id);
        if (fromIndex !== -1 && toIndex !== -1) {
            onReorder(fromIndex, toIndex);
        }
    };
    // 浮层渲染期需要根据 activeId 找到对应 condition 与 index
    const activeIndex = activeId !== null ? sortableIds.indexOf(activeId) : -1;
    // ─── 渲染 ───
    const canAdd = maxConditions ? conditions.length < maxConditions : true;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(cn_ui_1.CnPopup, { triggerType: "click", visible: visible, onVisibleChange: handleVisibleChange, trigger: trigger, placement: placement, offset: offset, container: floating_layer_1.getPopupContainer, ...floating_layer_1.cnPopupFloatingLayerOverlayProps },
            react_1.default.createElement("div", { className: (0, classnames_1.default)('condition-popup', popupClassName) },
                react_1.default.createElement("div", { className: "condition-header" },
                    react_1.default.createElement("span", null, title),
                    currentPageHintText && (react_1.default.createElement("div", { className: "condition-hint-message" },
                        react_1.default.createElement(cn_ui_1.CnIcon, { type: "help-fill", size: "small", className: "hint-icon" }),
                        react_1.default.createElement("span", { className: "hint-text" },
                            react_1.default.createElement("span", { className: "hint-text-bold" }, i18n_1.default.get({ id: 'PleaseNote', dm: '请注意：' })),
                            currentPageHintText,
                            i18n_1.default.get({ id: 'IsEffectiveByPageDimension', dm: '是按页维度生效的' }))))),
                react_1.default.createElement("div", { className: "condition-divider" }),
                react_1.default.createElement("div", { className: "condition-content" },
                    react_1.default.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd },
                        react_1.default.createElement(sortable_1.SortableContext, { items: sortableIds, strategy: sortable_1.verticalListSortingStrategy }, conditions.map((condition, index) => (react_1.default.createElement(sortable_condition_item_1.SortableConditionItem, { key: sortableIds[index], id: sortableIds[index], index: index, condition: condition, conditions: conditions, showAndBeforeCondition: showAndBeforeCondition, onRemove: onRemove, renderConditionItem: renderConditionItem, dragEnabled: !!onReorder })))),
                        react_1.default.createElement(PortaledDragOverlay, null, activeIndex >= 0 ? (react_1.default.createElement("div", { className: "condition-item condition-item-drag-overlay" },
                            react_1.default.createElement(sortable_condition_item_1.ConditionItemBody, { index: activeIndex, condition: conditions[activeIndex], conditions: conditions, showAndBeforeCondition: showAndBeforeCondition, onRemove: onRemove, renderConditionItem: renderConditionItem, dragEnabled: !!onReorder }))) : null)),
                    canAdd && (react_1.default.createElement("div", { className: "add-condition-container" },
                        react_1.default.createElement(cn_ui_1.CnButton, { text: true, onClick: handleAdd, className: "add-condition-btn" },
                            react_1.default.createElement("img", { src: icons.CONDITION_ADD, alt: i18n_1.default.get({ id: 'Add', dm: '添加' }) }),
                            addButtonText)))))),
        showDivider && react_1.default.createElement(toolbar_divider_1.ToolbarDivider, null)));
}
