"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Cover = void 0;
var hooks_1 = require("../../hooks");
var reactive_vue_1 = require("@formily/reactive-vue");
var core_1 = require("@designable/core");
var classnames_1 = __importDefault(require("classnames"));
var vue_demi_1 = require("vue-demi");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var shared_1 = require("@designable/shared");
// interface ICoverRectProps {
//   node: TreeNode
//   dragging?: boolean
//   dropping?: boolean
// }
var CoverRect = (0, vue_demi_1.defineComponent)({
    name: 'CoverRect',
    props: ['dragging', 'dropping', 'node'],
    setup: function (props) {
        var prefixRef = (0, hooks_1.usePrefix)('aux-cover-rect');
        var rectRef = (0, hooks_1.useValidNodeOffsetRect)((0, vue_demi_1.toRef)(props, 'node'));
        return function () {
            var rect = rectRef.value;
            var createCoverStyle = function () {
                var baseStyle = {
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    pointerEvents: 'none',
                };
                if (rect) {
                    baseStyle.transform = "perspective(1px) translate3d(".concat(rect.x, "px,").concat(rect.y, "px,0)");
                    baseStyle.height = (0, shared_1.isNum)(rect.height)
                        ? rect.height + 'px'
                        : rect.height;
                    baseStyle.width = (0, shared_1.isNum)(rect.width) ? rect.width + 'px' : rect.width;
                }
                return baseStyle;
            };
            return (<div class={(0, classnames_1.default)(prefixRef.value, {
                    dragging: props.dragging,
                    dropping: props.dropping,
                })} style={createCoverStyle()}></div>);
        };
    },
});
var CoverComponent = (0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    name: 'CoverComponent',
    setup: function () {
        var viewportDragonRef = (0, hooks_1.useDragon)();
        var viewportRef = (0, hooks_1.useViewport)();
        var cursorRef = (0, hooks_1.useCursor)();
        return function () {
            if (cursorRef.value.status !== core_1.CursorStatus.Dragging)
                return null;
            var renderDropCover = function () {
                var _a;
                if (!viewportDragonRef.value.closestNode ||
                    !((_a = viewportDragonRef.value.closestNode) === null || _a === void 0 ? void 0 : _a.allowAppend(viewportDragonRef.value.dragNodes)) ||
                    viewportDragonRef.value.closestDirection !== core_1.ClosestPosition.Inner)
                    return null;
                return (<CoverRect {...{
                    dropping: true,
                    node: viewportDragonRef.value.closestNode,
                }}/>);
            };
            return (<>
            {viewportDragonRef.value.dragNodes.map(function (node) {
                    if (!node)
                        return;
                    if (!viewportRef.value.findElementById(node.id))
                        return;
                    return (<CoverRect key={node.id} {...{ dragging: true, node: node }}/>);
                })}
            {renderDropCover()}
          </>);
        };
    },
}));
exports.Cover = (0, __builtins__1.composeExport)(CoverComponent, { displayName: 'Cover' });
//# sourceMappingURL=Cover.jsx.map