import $i18n from '../../../../../../locales/i18n.js';
import React from 'react';
import { CnButton } from '@cainiaofe/cn-ui';
import { useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useAiTableIcons } from '../../../../../../cn-ai-table/view/hooks/use-ai-table-icons';
/**
 * 条件项内容(前缀 + 拖拽把手 + 业务内容 + 删除按钮),
 * SortableConditionItem 与 DragOverlay 共用,保证浮层与原项 1:1。
 */
export function ConditionItemBody(props) {
    const { index, condition, conditions, showAndBeforeCondition, onRemove, renderConditionItem, dragEnabled, dragHandleRef, dragHandleListeners, dragHandleAttributes, } = props;
    const icons = useAiTableIcons();
    return (React.createElement(React.Fragment, null,
        showAndBeforeCondition ? (React.createElement("span", { className: "condition-item-and-slot" }, index === 0
            ? $i18n.get({ id: 'When', dm: '当' })
            : $i18n.get({ id: 'Moreover', dm: '且' }))) : null,
        dragEnabled && (React.createElement("div", { className: "drag-handle", ref: dragHandleRef, ...(dragHandleAttributes !== null && dragHandleAttributes !== void 0 ? dragHandleAttributes : {}), ...(dragHandleListeners !== null && dragHandleListeners !== void 0 ? dragHandleListeners : {}) },
            React.createElement("img", { src: icons.CONDITION_DRAG_HANDLE, alt: $i18n.get({ id: 'Drag', dm: '拖拽' }), draggable: false }))),
        renderConditionItem(condition, index),
        React.createElement(CnButton, { text: true, onClick: () => onRemove(index), className: "delete-btn" },
            React.createElement("img", { src: icons.CONDITION_DELETE, alt: $i18n.get({ id: 'Delete', dm: '删除' }), draggable: false }))));
}
/**
 * 可拖拽的条件项组件
 * 使用 @dnd-kit/sortable 的 useSortable 实现拖拽排序,
 * 通过 setActivatorNodeRef 将拖拽感知限定在把手区域,避免与内部控件交互冲突。
 */
export function SortableConditionItem(props) {
    const { id, index, condition, conditions, showAndBeforeCondition, onRemove, renderConditionItem, dragEnabled, } = props;
    // 刚拖拽结束的项禁用 layout animation,防止出现回弹到原位的视觉闪烁
    const animateLayoutChanges = (args) => {
        if (args.wasDragging)
            return false;
        return defaultAnimateLayoutChanges(args);
    };
    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id, disabled: !dragEnabled, animateLayoutChanges });
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : undefined,
    };
    return (React.createElement("div", { ref: setNodeRef, style: style, className: "condition-item" },
        React.createElement(ConditionItemBody, { index: index, condition: condition, conditions: conditions, showAndBeforeCondition: showAndBeforeCondition, onRemove: onRemove, renderConditionItem: renderConditionItem, dragEnabled: dragEnabled, dragHandleRef: setActivatorNodeRef, dragHandleListeners: listeners, dragHandleAttributes: attributes })));
}
