"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Insertion = void 0;
var hooks_1 = require("../../hooks");
var core_1 = require("@designable/core");
var reactive_vue_1 = require("@formily/reactive-vue");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var shared_1 = require("@designable/shared");
// export const Insertion: React.FC<IInsertionProps> = observer(({ workspaceId }) => {
//   const outlineDragon = useOutlineDragon(workspaceId)
//   const prefix = usePrefix('outline-tree-insertion')
//   const createInsertionStyle = (): React.CSSProperties => {
//     const closestDirection = outlineDragon.closestDirection
//     const closestRect = outlineDragon.closestOffsetRect
//     const baseStyle: React.CSSProperties = {
//       position: 'absolute',
//       transform: 'perspective(1px) translate3d(0,0,0)',
//       top: 0,
//       left: 0,
//     }
//     if (!closestRect) return baseStyle
//     if (
//       closestDirection === ClosestPosition.After ||
//       closestDirection === ClosestPosition.InnerAfter ||
//       closestDirection === ClosestPosition.Under ||
//       closestDirection === ClosestPosition.ForbidAfter ||
//       closestDirection === ClosestPosition.ForbidInnerAfter ||
//       closestDirection === ClosestPosition.ForbidUnder
//     ) {
//       baseStyle.width = closestRect.width
//       baseStyle.height = 2
//       baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y + closestRect.height - 2}px,0)`
//     } else if (
//       closestDirection === ClosestPosition.Before ||
//       closestDirection === ClosestPosition.InnerBefore ||
//       closestDirection === ClosestPosition.Upper ||
//       closestDirection === ClosestPosition.ForbidBefore ||
//       closestDirection === ClosestPosition.ForbidInnerBefore ||
//       closestDirection === ClosestPosition.ForbidUpper
//     ) {
//       baseStyle.width = closestRect.width
//       baseStyle.height = 2
//       baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`
//     }
//     if (closestDirection.includes('FORBID')) {
//       baseStyle.backgroundColor = 'red'
//     } else {
//       baseStyle.backgroundColor = ''
//     }
//     return baseStyle
//   }
//   if (!outlineDragon?.closestNode) return null
//   return <div className={prefix} style={createInsertionStyle()}></div>
// })
var InsertionComponent = (0, vue_demi_1.defineComponent)({
    props: ['workspaceId'],
    setup: function (props) {
        var outlineDragonRef = (0, hooks_1.useOutlineDragon)(props.workspaceId);
        var prefixRef = (0, hooks_1.usePrefix)('outline-tree-insertion');
        return function () {
            var outlineDragon = outlineDragonRef.value;
            var prefix = prefixRef.value;
            var createInsertionStyle = function () {
                var closestDirection = outlineDragon.closestDirection;
                var closestRect = outlineDragon.closestOffsetRect;
                var baseStyle = {
                    position: 'absolute',
                    transform: 'perspective(1px) translate3d(0,0,0)',
                    top: 0,
                    left: 0,
                };
                if (!closestRect)
                    return baseStyle;
                if (closestDirection === core_1.ClosestPosition.After ||
                    closestDirection === core_1.ClosestPosition.InnerAfter ||
                    closestDirection === core_1.ClosestPosition.Under ||
                    closestDirection === core_1.ClosestPosition.ForbidAfter ||
                    closestDirection === core_1.ClosestPosition.ForbidInnerAfter ||
                    closestDirection === core_1.ClosestPosition.ForbidUnder) {
                    baseStyle.width = closestRect.width;
                    baseStyle.height = 2;
                    baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y + closestRect.height - 2, "px,0)");
                }
                else if (closestDirection === core_1.ClosestPosition.Before ||
                    closestDirection === core_1.ClosestPosition.InnerBefore ||
                    closestDirection === core_1.ClosestPosition.Upper ||
                    closestDirection === core_1.ClosestPosition.ForbidBefore ||
                    closestDirection === core_1.ClosestPosition.ForbidInnerBefore ||
                    closestDirection === core_1.ClosestPosition.ForbidUpper) {
                    baseStyle.width = closestRect.width;
                    baseStyle.height = 2;
                    baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
                }
                if (closestDirection.includes('FORBID')) {
                    baseStyle.backgroundColor = 'red';
                }
                else {
                    baseStyle.backgroundColor = '';
                }
                Object.keys(baseStyle).forEach(function (key) {
                    var value = baseStyle[key];
                    (0, shared_1.isNum)(value) && (baseStyle[key] = value + 'px');
                });
                return baseStyle;
            };
            if (!(outlineDragon === null || outlineDragon === void 0 ? void 0 : outlineDragon.closestNode))
                return null;
            return <div class={prefix} style={createInsertionStyle()}></div>;
        };
    },
});
exports.Insertion = (0, __builtins__1.composeExport)((0, reactive_vue_1.observer)(InsertionComponent), {
    displayName: 'Insertion',
});
//# sourceMappingURL=Insertion.jsx.map